なんにせよ気分次第

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

【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

【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

ゲームをiframeにして載せたから遊びに来いよ 【LIGHTS ON】

f:id:inwan:20171018192429p:plain

だだーん!('ω')

 

どーも。なかなかenchant.jsについての記事を書く気が起きない私です。

 

そんななかゲームを作っていて問題があったので解決策を探してたらiframeで埋め込みする方法を発見したのでここにも載せることにしてみました。

 

まぁね、ゲームサイトやってるって記事書いても誰もサイトに来てくれないしね( ˘•ω•˘ )

 

やらせてやれば少しは来るでしょ?|д゚)

 

 てことでゲームはこれね↓(あ、なんかスマホだとできないっぽい。。)

 

まぁライツアウトっていう古典ゲームのちょっと改造版ですわ。

 

ルールは押したボタンとその上下左右の色が変わるので、左上の図になるようにうまく考えてポチポチしてね、って感じ。

 

ライツって言う通り電灯のイメージなんですが画像がショボすぎて電灯に見えない、なんて苦情は受け付けません('ω')ノ

 

ちなみにライツアウトではなくライツオンってタイトルにしたのは電灯をつけるから。ライツアウトは全消しがクリア条件だから反対なのね('ω')ノ

 

で、ライトを点けるってことでクリア時の演出はディスコをイメージしております(クオリティーがクソなのは口にするな)

 

そのうち音つけたりダンサー足したり派手にしたいとは思っている(思っているだけ…)

 

まだ完成には遠いけど、まぁそこそこ遊べるようにはできてるんで暇つぶしにでもやってくださいな('ω')

 

 

気に入ったらサイトにも来てね→Inwan's Games

未発表だったゲームの紹介

f:id:inwan:20170929065313p:plain

「enchant.jsのゲーム制作の記事を書くぞ!」と前回の投稿で決意したわけですが、ゲーム制作のあれこれを書く前にenchant.jsで作ったゲームを発表しなきゃね。

 てか忘れてたのよね、ってかさぼってたのよね、記事書くの(-_-;)めんどくさくて。。。ほんまダメ人間。。

 

 さてさて、以前に投稿したホラー危機一髪が6月初頭だったわけですが、その後10月目前の今日まで現時点で5本作っております。さらに1本現在鋭意製作中でございます。

 先の5本はまぁ「とりあえず作ってみました」レベルで作品として完成はしておりません。が、まぁ遊べます。今日はその5本の紹介です。

 現在鋭意製作中のゲームは「これはちゃんとアプリにすれば金になりそう」って感じなので一般的なアプリに近いレベルにできるまで発表しません( *´艸`)

 

 てことでまぁ我が未完の秀作を発表しましょう!(''ω'')ノ

やっぱ最初に作るのはシューティングゲームだよね

inwans.com シューティングゲームってゲームの基本だよね。自機操作して、敵を撃って破壊する。だいたいみんなここから始まるんだよね。そしてつまずくんだよね(笑)まぁ私はつまずきませんでしたがね!メガネクイッ

 これつくってて一つ大きな問題だったのがFPS。そこそこいいパソコンだったらたぶん60FPSでも普通に動くと思いますが、スマホでは無理。私の3年ほど使っているスマホでは15FPSがやっと。20まで上げると明らかに動きが鈍いくなる。

 ネイティブアプリと違ってブラウザ上で作動するとなるとやっぱ処理が重くなるみたい。しかもenchant.jsは他のゲーミングフレームワークより処理が遅いみたいなことも言われてるし。。(腕が良ければそれでも作れるのかもしれないが。。)

 というわけでこのゲームはスマホでもできるように15FPSに設定されています。

 

 制作面に関してはは敵の行動パターンとかを作ろうと思うともっといろいろ勉強しないと作れないなと感じて、っていうかそうするとこのゲームだけで時間使い過ぎって言うか、とりあえずもっといっぱいゲーム作ろう!って感じで一旦終了することにした次第('ω')挫折したわけではないぞ!!

パズルゲームでも作ってみるかって、ね

inwans.com たしか、このゲームを作り始めたのはホラー危機一髪の前。まだenchant.jsではなくjavascriptだけで作ってた頃。ゲームの大半はできていたけど演出(ブロックが落ちてくるような動き)の部分を作ろうとなったときにあちこち変えないとできないことに気づいて面倒臭くなって放置(笑)その後enchant.jsで作るようになって復活した。

 プログラミングを初めて一月半くらいの頃に基本部分を作ったわけですが(現時点でほぼ半年ですけど)、サクサク作った自分に「やっぱ俺天才だなぁ」と再確認した。20年前専門学校に行ってた時も思ってたけど。才能は20年放置されても変わらん言うことやね( ˘ω˘ )

 とはいえ、このゲーム開発当初はもうちょっと違うパズルゲームのはずやったんです。それが遊んでみて「いまいちやな」って感じてあれこれ調整しているうちに今の状態になりました。自分の直観でどんどん修正を加えていく、それも天才のなせるワザやね(笑)

ネタはパクリでも自己流に進化させる

inwans.com ネットであるゲームをやってそれを元ネタに自分流に作ってみたゲームです。障害物に当たらないように的に当てる。タイミングだけのゲーム。

 すごくシンプルだけど結構ハマる。個人的にはかなりお気に入りのゲーム。本当はこれをちゃんとアプリにして出そうと思ったんだけどステージをたくさん作るのが面倒くさくなってやめた(笑)

 弾を発射した瞬間にスローモーションになって障害物をギリギリのところですり抜けるところを見るのはとても気持ちいい!!これを思いついた自分はやはり天才だと思った(3回目)。そしてその思い付きをそのまま再現してしまえるところがやはり天…(略)

 このゲームを作り始めてシューティングの敵行動パターンを作る練習になるんやなかろうかと思ってね。ちょっと頑張っていろいろパターンを作ってはみたんやけどね。結局飽きた(笑)まぁまた気が向いたら頑張って作る( *´艸`)

たまには息抜きに簡単なゲームを作ってみたり

inwans.com 頭の使うプログラムに疲れたのでサクッと作れそうなものを作ろうと思って制作したゲーム。てか20年前専門学校でまだゲームプログラミングの初歩の初歩しか習っていなかったときにも暇つぶしに同じものを作った記憶が。。

 これの十字キーはこの本

ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!

の中に紹介されているものを真似ました。まぁパクリですけど(笑)パクったけど敬意を表して本を紹介してるんだからいいでしょ!ヒラキナオリ

 それにしても十字キーをつけてゲーム画面が小さくなるとかえってゲームボーイみたいで懐かしい感じで良いと思ったんですがいかがでしょうか?私のショボいドット絵と相まってレトロ感がアップしてるのは気のせいではないはず。。

 プログラム的にはすぐできたのでちょっと複雑なステージを追加してみました。てかクリア条件を付けてステージをたくさん作ればアプリで出すのも可能だな、なんてちょっと思ったがやる気がないので放置(笑)

ただの迷路だって楽しいだろ?

inwans.com 昔はさ、テーマパークに植木で作った迷路ってなかった?あったよね?楽しかったよね?

 そう、このゲームはそんな昔あったテーマパークの植木迷路のような「ただの迷路」です。敵も出ないしお宝もない。ただゴールを目指すだけの迷路。

 より迷路な感じにするためにド〇クエ風に〇の中だけが見える仕様にしてみました(実はドラ〇エやったことないけど。友達家で見た。。)

 まぁ、今回はマップを作ってキャラを移動させてみたかっただけなのよね。で、それだけだともったいないのでゴールをつけて迷路にしてみました、みたいな。もちろん敵を出現させたりトラップ仕掛けたりとか進化を考えてはいるが面倒くさくなったのでここで終了(笑)そういうことです。

 

 

 

 こんな感じで現在enchant.jsで作ったゲームは5本です。未完成ではありますが個性的で素晴らしいゲームになっていると思っています。

 

 これらのゲームを作るときに苦労した点やわかったこと疑問に思うことを今後がんばって記事にしていきたいなと思っています(たぶん。。)

 

 てかもう記事書くの疲れた!

 ほなの(''ω'')ノ

enchant.jsでゲーム作ってるからそれについて書いていこうかなと思う

f:id:inwan:20170926224656p:plain

 前回投稿してから何か月たったのか。。まったくやる気がない。というか書くことがない。筋トレは続けているけれどトレーニングノウハウを語れるわけでもないし、日々の筋トレ内容をつづったところで誰が他人の毎日の筋トレ記録見てよろこぶねん、ってなるしな。。

 

 まぁしかしね、最近はね、ずっとゲーム作ってるんですよね。enchant.jsっていうの使ってね。。。。ま、そんなわけでenchant.jsでのゲーム制作について書いてみようかなっと思ってね(''ω'')ノ

 

 ゲーム制作に関しては素人で、今年の3月末くらいからjavascriptを勉強しはじめて5月ころからenchant.jsを使い始めたような気がする。

なんでenchant.js?

 ところでなんでenchant.jsにしたかっていうと、とりあえずハイブリッドアプリを作りたかったってのが一つ。ハイブリッドアプリならiPhoneでもandroidでもブラウザでも遊べるっていうのはとても大きなポイントだと思う。っていうかブラウザでできるってことはスマホやPC関係ないし、ホームページに載せてすぐ公開できるっていう恐るべき手軽さ。

 もう一つは開発環境の手軽さ。enchant.jsダウンロードすればあとは普通のエディターで書いてブラウザで実行するだけ。すんごい楽。特に何も用意しなくていいし、設定とかもない。金もかからない。素晴らしい。

 それともう一つ、参考書が売ってた。やっぱ素人なので参考資料はそれなりに集める必要がある。ネットで情報集めてもいいけどやっぱ書籍の方が信頼感が違う。まぁ本の方が読みやすいし、あとから「確かあの本のあのページに載ってたような。。」って感じでほしい情報がすぐ探せるしね。

はじめて学ぶ enchant.jsゲーム開発

はじめて学ぶ enchant.jsゲーム開発

 

 ↑(とりあえず本を紹介して少しでも金を稼ぎたいという貧乏精神が全開であるがそこは見逃しておくれ)

enchant.jsでゲーム制作の日々

 まぁここ4ヶ月ほどちょこちょことゲームを作っております。ちなみに前回の記事に載せたホラー黒ひげ危機一髪風ゲームはjavascriptだけで作っています。enchant.jsは使ってません。enchant.jsはあのゲームのあとから勉強し始めました。

 enchant.jsで開発を始めて悪戦苦闘の日々です。なかなか思うようにできないことがたくさんあります。あれこれ考えて作ってみるんですがこれでいいのかどうか疑問だらけです。

 というわけで疑問だらけの私の開発内容をここでさらして「どうですか?」ってしてみようかなって思った次第('ω')

疑問も失敗もさらしましょう

 そんなわけで自分なりのやり方を公開してみようかなと。疑問もそのまま書いてみようかなと。たまたま詳しい先輩が通りかかったら疑問に答えてもらえたらなぁ。。っていう期待を込めて( *´艸`)

 今現在勉強してる方は何かの足しにするか、「おお、同志よ!」って感じでフレンドリーにしてくれるとありがたい。

とりあえず作ったものを見てよ

 作った作品はこちらにて公開しております→Inwan's Games

 このブログの右上の広告(PCの場合)でもさり気に宣伝しているんですけどね(^_-)-☆

 

 

 ってことでね、これからenchant.jsでのゲーム制作について投稿していきたいなと思います。正直「サイトやアプリの宣伝にもなってくれたらなぁ」なんて期待もあるのでちゃんと投稿頑張りたいと思います(ほんまに頑張るやろか。。。)

 

 というわけでまとまりのない記事でしたが(毎回やけど)読んでくれてサンクス!

 ほなの(''ω'')ノ

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