ゲームでよくある画面エフェクトを作ってみた【enchant.js】

最近ゲームのことを考えてて思ったのがエフェクト・演出です。自分のゲームにもっと演出が欲しいな、とちょっと思ったので作ってみることにしました。

で、とりあえず何から作ろうかなと考えて、簡単そうなやつから作ってみました。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()で原点を設定してクマさんまでの半径を取得して謎の数学関数を使えば動きます(適当)

どのゲームで遊ぶ?

レトロ風の縦シューティングゲーム。敵が個性的に動き回わるところも懐かしさを感じます。
簡単な計算問題を制限時間内に何問解けるかな?頭の体操にどうぞ。
スマホ専用対戦ピンポンゲーム。タッチだけのイライラ操作が逆に楽しい?
平面なルービックキューブみたいなゲーム。スライドさせて模様を完成させます。

コメント欄

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発