最近ゲームのことを考えてて思ったのがエフェクト・演出です。自分のゲームにもっと演出が欲しいな、とちょっと思ったので作ってみることにしました。
で、とりあえず何から作ろうかなと考えて、簡単そうなやつから作ってみました。enchant.jsには拡大・縮小・回転のプログラムが最初から入っているのでそれを利用したものを考えてつくってみました。
それで出来上がったものがこちら
各クマさんをタッチするとそれぞれのエフェクトが作動します。
やっぱゲームって見た目の演出が大事やと思うんですよね。演出がちゃんとあるだけでペラペラのカスみたいな内容のゲームでも面白いと感じさせることができるんやないかと思うんですよ(^^;)逆にストーリーとかシステムとか超凝ってても演出なかったら絶対クソゲーやろうし。ゲームプログラムで一番大事なのはこういう演出やなかろうかと思うわけですよ(´ー｀*)ｳﾝｳﾝ
RPGの敵出現風エフェクト
左のクマさんを押すと拡大縮小を利用したRPGの敵に遭遇した時の演出みたいなものが起こります。音と組み合わせればなんとなくそんな感じしなくもないでしょ？
var ExtendEffect = function(){
this.isPlay = false;
this.count;//繰り返し用カウント
//エフェクトスタートと初期化処理
this.start = function(){
if(!this.isPlay){
this.isPlay = true;
this.count = 0;
}
}
//一瞬の画面の揺れエフェクト(ダメージを受けたときなど)
this.do = function(data){//data：エフェクトを掛ける対象
if(!this.isPlay){
return;
}
var a = [1.3, 1, 1.3, 1, 1.3, 1, 3,];
if(this.count < a.length){//配列の数まで
if(this.count % 2 == 0){//偶数回は拡大
if(data.scaleX < a[this.count]){//a[this.count]の大きさまで
data.scaleX += 0.2;
data.scaleY += 0.2;
}else{
this.count++;
}
}else{//奇数回は縮小
if(data.scaleX > a[this.count]){//a[this.count]の大きさまで
data.scaleX -= 0.2;
data.scaleY -= 0.2;
}else{
this.count++;
}
}
}else{
this.isPlay = false;
data.scaleX = 1;
data.scaleY = 1;
}
}
}
クマのイベントリスナーにstart()を入れといて触るとスタート、メインループ内のdo()がisPlayがtrueで作動って感じです。dataはSceneオブジェクトです。Groupでやってみたら拡大の中心点が違って位置が思いっきりずれます(;’∀’)
※GroupのoriginX、originYを変更すると大丈夫です。Groupは初期設定で左上が原点になってるようです。
ダメージ演出みたいなやつ
真ん中のクマさんを押すと何か衝撃を受けて画面が揺れてる感じになります。ダメージを受けたときなんかに使えます。
var ShakeEffect = function(){
this.isPlay = false;
this.max = 5;//エフェクトの繰り返し数の最大値
this.count;//繰り返し用カウント
//エフェクトスタートと初期化処理
this.start = function(){
if(!this.isPlay){
this.isPlay = true;
this.count = 0;
}
}
//一瞬の画面の揺れエフェクト(ダメージを受けたときなど)
this.do = function(data){//data：エフェクトを掛ける対象
if(!this.isPlay){
return;
}
if(this.count++ < this.max){
if(data.age % 2 == 0){
data.x += random(15);
data.y += random(15);
}else{
data.x -= random(15);
data.y -= random(15);
}
}else{
this.isPlay = false;
data.x = 0;
data.y = 0;
}
}
}
シーンをランダムに一定時間動かしてるだけです。イージーですね(´∀｀)
画面全体を回転
今回難しかったのがこれ。どうやらenchant.jsにはspriteにあるrotate()関数はGroupやSceneにはついていないみたいです。なのでいくつもの画像を同時に回転させようとすると自分でプログラムを組まないといけないみたいです( ；∀；)
で、右のクマさんをタッチすると背景とクマさんが回転します。クマさんが背景の定位置にくっついて回ることがこのプログラムの重要なポイントです。
var Rotation = function(){
this.originX;
this.originY;
this.objs;
this.data = new Array();
this.isPlay = false;
//初期位置を取得
this.initialize = function(objs, x, y){//objs:回転させるオブジェクト(配列)、x:y:回転の原点の座標
this.originY = y; //原点になる(画面の中心)
this.originX = x; //原点になる(画面の中心)
this.objs = objs;//オブジェクトを保存
var rx, ry;//オブジェクトと原点の距離計算用
for(var i = 0, len = objs.length; i < len; i++){
this.data[i] = new Array;
this.data[i].rx = objs[i].width / 2;//キャラの半径x
this.data[i].ry = objs[i].height / 2;//キャラの半径y
this.data[i].ox = objs[i].x + this.data[i].rx;//キャラの中心位置x
this.data[i].oy = objs[i].y + this.data[i].ry;//キャラの中心位置y
ry = this.data[i].oy - this.originY;//原点からの距離x
rx = this.data[i].ox - this.originX;//原点からの距離y
this.data[i].rad = Math.atan2(ry, rx);//角度算出
this.data[i].r = Math.sqrt(ry * ry + rx * rx);//画面のセンターとキャラの距離(移動円の半径)
}
}
//回転実行関数
this.do = function(deg){
for(var i = 0, len = this.objs.length; i < len; i++){
this.data[i].rad += deg * (Math.PI / 180);
if(this.data[i].rad >= Math.PI * 2){
this.data[i].rad -= Math.PI * 2;
}
this.objs[i].y = (this.originY) + Math.sin(this.data[i].rad) * this.data[i].r - this.data[i].ry;//掛ける数値は半径
this.objs[i].x = (this.originX) + Math.cos(this.data[i].rad) * this.data[i].r - this.data[i].rx;//掛ける数値は半径
this.objs[i].rotate(deg);
}
}
}
先に言っときますが、私高校時代全く勉強しなかったのでサインコサインて実はよくわかっていない(;’∀’)しかしプログラムなら読めば何とかなる！円の動きのプログラムを検索していくつか読めば何とかなるもんですよ(笑)
簡単に説明するとinitialize()で原点を設定してクマさんまでの半径を取得して謎の数学関数を使えば動きます(適当)
関連記事
