なんにせよ気分次第

アラフォーおっさんの自由なブログ。筋トレやゲーム制作、音楽のことなど書きたいことを適当に書いてます。不定期更新

【enchant.jsでゲーム開発】第2回 画面切り替え時のフェードアウト

f:id:inwan:20171026212913p:plain

第2回目は前回予告した通りフェードアウトです

ちゃんと2回目があるのは素晴らしいですね(゚∀゚)


今回の内容は前回のタイトル画面からゲーム画面に切り替わるときのような全画面での切り替えの時にフェードアウト(暗転)を入れてちょっとプロっぽいことをしてみよう!っていう感じのやつです

一応もう一度言っておきますが、私も素人なので私のやり方が正しいとは限りません。とりあえず動きはしますが何か間違っていたりする可能性はかなりあるので一つの参考として読んでください。間違いを見つけた方は優しくコメント欄に書いといてください('ω')ノ

ちなみに今回のフェードアウトのもとのプログラムはjsdo.itで見つけたもので、それをほぼそのまま使っています。気になる方はそちらもチェックしてください
jsdo.it

フェードアウトで切り替えのソース

//フェードアウトの部分
var FadeOut = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h) {
        enchant.Sprite.call(this, w, h);
        
        this.image = core.assets['black.png'];
        this.x = 0;
        this.y = 0;
        this.opacity = 0;
        
    },
    onenterframe:function(){
        this.opacity += 0.1; //FPSによって調整が必要
        if(this.opacity >= 1){
            this.remove();
            core.popScene();
        }
    }
});

//タイトル画面
function home(){
    var title = new Scene();//タイトル画面
    var logo, start;
    
    //背景色
    title.backgroundColor = 'rgba(240, 170, 60, 1)';  
    
    //タイトルロゴ画像表示
    logo = new Sprite(LOGO_W, LOGO_H);
    logo.image = core.assets['title.png'];
    logo.moveTo(0, 70);
    title.addChild(logo);
   
    //スタートロゴ表示
    start = new Sprite(300, 100);
    start.image = core.assets['start.png'];
    start.moveTo(170, 600);
    title.addChild(start);
    start.addEventListener(enchant.Event.TOUCH_START, function(event){
        var fadeOut = new FadeOut(WIDTH, HEIGHT);
        title.addChild(fadeOut);
    });

    core.pushScene(title);
}

フェードアウトの解説でござる

フェードアウトの部分のプログラムはjsdo.itのプログラムを丸ぱくりと言っても過言ではないくらいほぼそのまんま( *´艸`)

唯一大きく違う点はjavascriptのsurfaceでやるところを全画面サイズの黒の画像を用意して楽にしたところくらい。surfaceがあんまよくわからんかったので「画像でええやん」という手抜き(;'∀')自分のできるところに持ってくるのもある意味才能だと思う。。。

フェードアウトの仕組み自体はこの黒の画像のopacityというプロパティの値を0から1に徐々に増やしているだけ。このopacityはcssの透明度を指定する要素で0が完全に透明で1が完全に見える状態を表します。

つまり黒い画像の透明度をどんどん下げていくと画面は暗くなっていっているように見える、という寸法ですわ

そしてフェードアウトしきったところでpopScene()で切り替えると「なんということでしょう。まさに匠の技です」って感じになるわけですな!(`・ω・´)




というわけで今回はここまで('ω')ノ


私のプログラムが気になる方は遊びに来てね(`・ω・´)
inwans.com

Copyright© なんにせよ気分次第 , 2016 All Rights Reserved.