画面のフェードアウト処理【enchant.js】

ゲームを作っていて画面遷移時に絶対欲しいのがフェードアウト処理です。このフェードアウト処理がないと突然画面が切り替わり、あまりにも不自然に感じてしまいます。

フェードアウト処理はopacityという透明度のプロパティを使います。これは1が不透明(見える)で0が透明(見えない)です。なので簡単に説明すると黒い画像を用意してこれが透明から不透明に変わっていけばフェードアウトしていっているように見えるわけです。

サンプルプログラム

var FadeOut = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h, color) {
        enchant.Sprite.call(this, w, h);
        
        // Surface作成
        var bg = new Surface(w, h);
        bg.context.fillStyle = color;
        bg.context.fillRect(0, 0, w, h);
        // Sprite作成
        Sprite.call(this, w, h);
        this.image = bg;
        this.x = 0;
        this.y = 0;
        this.opacity = 0;
        this.isStart = false;
    },
    //フェードアウト開始初期処理(引数にシーンが必要)
    start: function(scene){
        if(!this.isStart){
            scene.addChild(this);
            this.isStart = true;
        }
    },
    //実行処理(先にstart()で初期処理しないと作動しない)
    do: function(speed){//引数:フェードアウトの速さ0.01~0.5(大きいほど速い)
        if(this.isStart){
            this.opacity += speed;
            if(this.opacity >= 1){//終わったらtrueを返す
                return true;
            }
            return false;
        }
    }
});

まず、

var fadeout = new FadeOut(640, 960, 'black');

のように画面サイズとともに色を指定してFadeOutクラスを作成します(色を指定できるようにしているので白や赤など状況によって使い分けられます)。

initializeでは指定の色とサイズのコンテキストの作成などの初期化処理をします。

startメソッドはフェードアウトを開始したい場所に書きます。

doメソッドはメインループ内に書いておきます。isStartフラグがtrueになるとフェードアウトを開始します。ループ毎に指定されたスピードでフェードアウトします。終わったらtrueを返します。

以上の方法で簡単にフェードアウトさせることができます(‘ω’)ノ

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

スマホ専用対戦ピンポンゲーム。タッチだけのイライラ操作が逆に楽しい?
あほげー。意味など考えないでください。鶏の気持ちを理解しましょう。
障害物に当たらないようにタイミングを狙って弾を撃つゲーム。
宇宙船を操作して遭難しているエイリアン達を助けに行きます。全部で15ステージ。

記事の感想・コメント

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

コメントを残す

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

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記