なんにせよ気分次第

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

【enchant.jsでゲーム開発】第1回 タイトル画面とゲーム画面の切り替え 

ついにやる気を出してenchant.jsについての記事を書く!!

第1回目はタイトル画面とゲーム画面の切り替えについてです

なんでそんなのから始めるの?と疑問の声もあるかと思いますが、キャラを表示したり動かしたりなんてのは他のサイトやブログなり調べたらいくらでも出てくるでしょ?

他にいくらでもある情報より探してもあんまり出てこない情報の方が重宝されますやん('ω')ノ

あ、最初に言うときますが、私も素人なので私のやり方が正しいという保証はありません。一応動いているのでできていると思っていますがプロが見たら「いやいやいや…」なんてところも多々あると思います。

なので「ふ~ん、こんな方法があるのね」ってくらいの軽い気持ちで読んでください。これは「答え」ではなく一つのアイデアだと思ってください

では始めますか('◇')ゞ 

やっぱタイトル画面あったほうが良いよね

タイトル画面あるとなんかちゃんとしたゲームっぽくない?いきなりゲームが始まるよりタイトル画面があるだけでなんか市販のゲームっぽく見えない?と思うのは私だけでしょうか?

ゲーム作ってるとメインのゲーム部分だけ作って満足しがちですが、ゲームをやる側の人間からしてみたら意外とゲームそのものの内容より他の部分が大事だったりします。タイトル画面もそんな要素の一つだと思います

タイトル画面を作ってみると最初はただタイトルだけを表示することになるわけですが、ゲームを作っていくうちにいろいろアイデアが浮いてきて「ここに大きくキャラを表示したい」とか「一定時間たったらデモシーンにしたい」とか夢が膨らんできたりすると思います。

と言っている私自身まだそれを作るところまで来ていないんですが、夢を持つことが大事です!それが上達の近道なのです('ω')ノ

私はこんな感じに作りました

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){
        core.popScene();
    });

    core.pushScene(title);
}

こんな感じで表示されます↓
f:id:inwan:20171025215622p:plain

単純に背景色を設定してタイトルロゴとスタートと書いた画像があるだけです。STARTにタッチするとメインのゲーム画面に切り替わります

enchant.jsではこのプログラム内で使っているpopScene()とpushScene()で画面を切り替える方法が簡単で良いと思います。詳しいことはわかりませんが、ゲームのメイン部分をcore.rootSceneに作っておいてpushSceneで別の画面を表示させ、終わったらpopSceneで戻すという感じです。

タイトル画面なのでプログラム上でゲームが始まるしょっぱなの部分にこの関数を書いておけばタイトル画面が表示されるようになります

もちろんタイトル以外でも一時的に出したい画面なら何でもOKです。たとえばこんな風に確認ダイアログを出すこともできます↓

f:id:inwan:20171025213603p:plain

上のダイアログの画像を見るとわかるとおりpushSceneではrootSceneの上にシーンが作られるようです。なので上図のような小さい画像を出す際は周りの空いているスペースを少し暗くするような小技も必要になります

これができればポーズ画面つくってみたり、イベントシーンで大きなキャラを表示して会話させてみたり、、、夢が広がりますね!!!(゚∀゚)

切り替わるだけじゃ。。。ね

上のプログラムでは突然画面が切り替わります。まぁ、それでもいいっちゃいいけど、なんか足りない気がする。。。

実は市販のゲームをよく見ると切り替わる際に微妙に画面が暗くフェードアウトするようにして少し間を開けて画面を切り替えていたりします。

このフェードアウトの小技があるだけでなんかプロっぽい!!!


ってことで次回はフェードアウトをやろうかと思うよ('ω')ノ

たぶん・・・



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

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