ロード画面を好きなように改造する

enchant.jsのゲームを起動すると一番最初に表示される画面。

このバーが満たされていくことでロード状況を教えてくれるわけですが、何もない画面にこれだとなんか寂しいので改造してみましょう。

ちなみにこれはオリジナルゲーム.comさんの記事を読んだのがきっかけです。

この記事ではloadSceneを作ってgameオブジェクトのloadingSceneに入れているんですが、それならenchant.jsの中身のloadingSceneを直接いじってやろうじゃねぇか!!となった、ということです(*´ω`)

loadingSceneの中身

enchant.js内のloadingSceneの中身がこちら。

なんとこの部分は我々が慣れ親しんだenchant.jsで書かれています!!これなら改造し放題!!(・∀・)

と、行きたいところですが、ここでは画像や音楽は使えません。だってロード前だから。読み込み状況を知らせてくれる画面だから。。(´;ω;`)

と、諦める必要はなくて、画像を出したいならここで必要な画像だけ先に読み込んでしまえばOKってことです。まぁその方法はオリジナルゲーム.comさんの記事を読んでくださいな(‘ω’)ノ

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

フレーム処理を改造する

enchant.jsではFPS(1秒間に画面を更新処理する回数)を好きなように設定できるようになっているのですが、これがどうも安定していないというのがずっと気になっていました。

パズルゲームなどを作っている段階では気にならなかったんですが、シューティングゲームを30FPSで作ってみるとどうも弾の動きが早くなったり遅くなったりしている。

気になりだしたら凄く気になるので改造を試みてみました。

requestAnimationFrame()が更新している

javascriptの知識のまったくない素人がenchant.jsの中身を読んでも全く理解できません(;´・ω・)

が、時間をかけてそれっぽいところをついに探し当てrequestAnimationFrame()という関数が画面の更新処理をしているということを突き止めました( `ー´)ノ

で、更新処理をしているであろう所を読んでみるとなんか変なんですよ。

requestAnimationFrame()が更新処理をしてくれるはずだけどsetTimeout()も使っています。

多分これはrequestAnimationFrame()に対応していないブラウザに対応させるためにあるんだろうと思うんですが(ちゃんとわかっていない)、たぶんいらないんじゃね?(・∀・)

ってことでばっさりカット。

しかし、これだと60FPSになります(requestAnimationFrame()は60FPSで更新処理する)。なのでこの_requestNextFrame が呼ばれたときに好みのFPSになるように調整して必要な時だけ処理するようにします。

たとえば30FPSにしたい場合2回に1回処理するようにすれば処理が半分になり30FPSになります。

で、それを書く場所が _requestNextFrameのちょっとしたにあります。

なんか上でバッサリカットしたらここに_requestNextFrame()が来るようになりました。そしてその下にFPSを調整する処理を書きます(30FPSにしたいなら2回に1回処理するように書く)。変数を使ってゲームによって変更できるようにしておいた方が良いです(自分で考えてね(^_-)-☆)

あとついでにrequestAnimationFrameで検索すると以下のようなところがあります。

たぶんこれはrequestAnimationFrameに対応していないブラウザのための処置だと思うんですが、これ無しで動くのでこいつもバッサリカットしてやりましょう(・∀・)

まとめ

細かい説明はありませんが(説明できないんだよ(;^ω^))こんな感じで修正するとFPSが安定するようになりました。気になる方は試してみてください(改造は自己責任で!ちゃんとバックアップとっとけよ!)

読めるenchant.jsを手に入れよう

enchant.jsは初心者でも簡単にゲームが作れるゲームエンジンです。なので必要最低限の処理は用意してくれているのですが、プログラミングが上達してくると物足りなさや変更したい部分などが出てきます。

ありがたいことにenchant.jsはMITライセンスというライセンスで公開されていて(詳しいことは知らん)、ソースコード内の著作権表示を削除しなければ「ソースコードの改変」「再配布」を自由に行っていいようです。

enchant.jsのライセンス

なのでプログラミング技術が上がってきたら少しずつenchant.jsの改造に着手しましょう。そしていつの日か自作ゲームエンジンを開発してやりましょう!(・∀・)

読めるenchant.jsを手に入れる

enchant.jsダウンロード

上のリンクからenchant.jsをダウンロードするとenchant.min.jsというファイルが入っていて、もちろんこれがenchant.jsなんですけど、これは改行やスペースなどが消されていて読むことができません(´;ω;`)

で、どこかから読めるenchant.jsを入手しないといけないんですが一体どこで手に入れられるのかわからなくてしばらく困っていたんですけど、見つけたんですよ!(・∀・)

enchant.js 0.8.3用プロジェクトテンプレート

jsdo.itはweb上でhtml・css・javascriptの開発が行えるサイトのようで(使ったことないから詳しいことは分からない(^^;))いろんなプログラムが公開されています。なのでenchant.jsを使ったプログラムも公開されていて、なんと!enchant.jsも読める形でアップされています!ヤッター!

ということでここからダウンロードするかコピペしてenchant.jsを手に入れましょう!(私の場合ダウンロードしようとしたらセキュリティーソフトが警告を出したのでコピペしました)

初心者には厳しい現実・・・

で、じっくり読んでみようと思って中身を見てみるとこれが全く理解できない(;´Д`)

当然と言えば当然なんだけど、enchant.jsはゲーム開発初心者でもゲーム制作を楽しめるようにしてくれているゲームエンジンです。つまりプロがプロフェッショナルな技術を駆使して書いてあるプログラムなのでちょっと齧った程度の素人プログラマーが読めるわけはないのです(´;ω;`)

と、諦めるのは早いわけで(;´∀`)

時間をかければ出来るようになるわけで、少しずつ挑戦していきましょう(‘ω’)ノ

enchant.jsのクラスの処理で困ったこと

enchantjs講座

enchant.jsのクラスで私が遭遇した困ったこととその解決策を書いておきます。

thisがダブるとき

クラスを使うと色々な変数をクラスオブジェクトのプロパティとして追加して使うことになるわけですが、たまにイベントリスナを使いたいときに困ったりすることがあります。

と書いたときにplayer.addEventListner内でthis.aaa()メソッドを呼び出した場合、thisはplayerオブジェクトという風に判断されてうまく動いてくれません。こっちはMainGameSceneを指すthisのつもりなのに言うことを聞いてくれません。

一体どうすりゃいいのよ?としばらく悩んで放置していたんですが解決方法は実は簡単でした(´Д`)

変数を作ってやってそれにこのクラスオブジェクトのアドレスを渡してやれば処理できるってわけです。

簡単なことだけど気づかなかった(;´Д`)

クラス内の変数のスコープ

クラス内で宣言した変数は当然ローカル変数になります。それは分かるんだけど同じクラス内でも別のメソッドになるとローカル変数は使えない。

クラスのthis.○○みたいにプロパティにしてしまえば問題ないんだけどシーンのようなたくさん変数を扱う場合すべてをプロパティにするのは入力の字数も多くなるし読みにくくなるしやりたくない。

しかし、実際これはシーンのようなたくさん変数を扱うクラスでない限り問題にならないようで、しかもシーンだと基本的にonenterframeくらいしか使わないのでonenterframeを独立したメソッドとして書かず、

イベントとして処理することで解決しました。

本当は分けて書きたかったんだけど仕方ないね(´・ω・`)

onenterframeは継承しないとない

どうやらonenterframeはSprite、Group、Sceneのどれかを継承してクラスを作らないとフレーム毎に作動してくれません。

そんなに大した問題じゃないけど、どうしてもonenterframeを使いたいってときは継承して作りましょう

sceneに直接addChildしない方が良い

今回もちょっとした小技の紹介。大したことじゃないけど知っておくと便利かも。

enchant.jsでは画像はsceneにaddChildすることで表示されます。だけど最初から全部sceneにaddChildしていくと画面全体にエフェクトをかけて演出したいときに困ることがあります。

たとえば画面を揺らす演出をしたいときに画面内に表示されている得点などまで一緒に揺れるのはちょっとおかしくない?それも演出の内なら良いけどそうじゃないなら一緒に揺れると困るわけです。

で、どうするかというとGroupで分けます。ゲームのキャラクターなどを表示するGroupと得点などの情報を表示するGroupって感じに分けて作って振り分けてaddChildします。

例えばこんな感じにしてます。

ゲーム用にscreenというGroupを作ってゲーム部分はそこにaddChildします。keypadはGroupを継承して作ったバーチャルパッドのグループです。ボタンなどはこのkeypadにaddChildされています。

このように作っておくとscreenを動かしたり拡大縮小したりしてもkeypadは完全に別の存在になっているので影響を受けません。

 

大したことじゃないけど、あとから気づいて修正するのは面倒臭いので最初から分けて作っておくのが良いと思います(‘ω’)ノ

enchant.jsで右クリックを使いたい

enchatnt.jsではマウスの右クリックはサポートされていないようです。右でも左でもクリックは同じ扱いで処理されます。そして右クリックするとブラウザのメニューが表示されてしまいます。

でも右クリックが使いたい!!

ゲームで使うつもりだったのに出来ないのは困る!!ってことで方法を探しました。

javascriptで書いてみる

enchant.jsでサポートされていないならjavascript直で処理を書くしかない。ってことで検索して出てきたのがこちら

これでメニューの表示をキャンセルし、右クリックに処理を割り当てることが可能になります。

ただし!enchant.jsとは関連がないのでいろいろ困ることが出てきます。

問題1:eventの位置が違う

enchant.jsのtouchstartは設定したゲーム画面内の位置をeventで渡してくれますがjavascriptのmousedownで書くと当然enchant.js内の位置ではないです。ブラウザ内での位置になります。

なので右クリックかどうかの判定だけはmousedownで判断するが、位置に関してはenchant.jsのtouchstartで拾うということになります。

問題2:スマホに対応していない

当然と言えば当然なんだけどenchant.jsはスマホでもPCでも動くようにしてくれているゲームエンジンです。それを使わずjavascriptのmousedownを使うとスマホでは対応してくれません(マウスの処理だもんね)。なのでPCとスマホで処理を変える必要が出てきます。

ということでスマホかPCかを判別しなくちゃいけません。で、やり方を検索して出てきたのがこちら

まとめ

は?プログラムは?

って思われている方もいるかもしれませんがそれは自分でやってください(^^;)実はこれ、けっこう無理くりな感じになってキレイなプログラムにならないんですよ。なのでそんなプログラム見せたくないので自分で作ってください(^^;)

てかenchant.jsの必要な部分を改造する方法が分かればいいんですが今のところそこまでの知識がないので仕方ないです。いつか方法がわかればその時改めてばっちりなプログラムとともに紹介したいと思います(^^;)

画面タッチ処理のいろいろ

enchantjs講座

画面のタッチ処理について自分がやってみて気づいたことを紹介します。

画像無しのスプライトを使う

例えば画面全体のどこかを押すことで何か処理をさせるならシーンにイベントリスナを設定します。

じゃあ画面の右半分にタッチする場合と左半分にタッチする場合で処理を変えたい場合はどうすればいいのかな?

と思ったときに試してみたのが画像を設定しないスプライト。画像は設定していないので当然画面には何も表示されていないけど設定した大きさと場所にスプライトは存在しているようです。なのでイベントリスナを設定してやるとちゃんと反応してくれます。

タッチに当たり判定をつけて処理する

例えばタッチで触ったものに何かしらの処理をさせたいとき、普通はスプライトにイベントリスナを設置して処理すると思うんですが、これだと画像が重なった時に上になっている方のイベントが処理されます。

例えばそれが画像が小さくてスプライト的にはそこにあるけど見た目は何もない部分なんてときに、その余白部分の下に別の画像があって、プレイヤー的にはそっち押したつもりなんて状態の時に正しく処理できない(説明が難しい)。

上の画像で言うと重なってる部分では上になってる方のイベントリスナが発火します。もしプレイヤーが下の方を押したつもりだったらおかしなことになってしまいます。

というか余白部分でも反応してしまうのでそれをどうにかしたい(最初からそう言えば分かりやすかったんだな(^^;))。

で、どうしたもんかな?と考えた結果、スプライトのイベントリスナでは処理をせず、タッチした場所とキャラとの当たり判定を取るようにしました。

通常のシューティングゲームなどと同様にキャラの当たり判定を設定し、画面にタッチするたびにその場所とキャラとの当たり判定をとればOKです。

で、このとき上になってるキャラから当たり判定を取っていけば重なっていても問題なく処理できます。

enchant.jsで簡単にゲームが作れるテンプレート公開!!

enchantjs講座

今日は自分の作ったテンプレートを公開してみようかと思います(*´ω`)

このテンプレートではenchant.jsですぐにゲーム開発が始められるくらいに必要最低限の機能は入れてあります。初心者でもこのテンプレートと一冊enchant.jsの本を買ってくれば何とかゲームつくれるんじゃないかと思います(*´ω`)

しかし、プログラムの記事を書いといて言うのもなんですが、やっぱり他人に自分のプログラムを見せるのは恥ずかしい(*ノωノ)しかもテンプレートなんて裸を見られているにも等しい行為(*´Д`)ハァハァ・・

で、ここからダウンロードできます(サクッと進める)→ダウンロード

(なんか試しに自分でダウンロードするとマカフィーが危険とか言ってくるんですけど(;´・ω・)。自分で作って上げたのに危険て言われる悲しさよ(´;ω;`)

使い方と内容の説明

ダウンロードして解凍してフォルダ内にあるindex.htmlを実行するとブラウザが開いてゲームが起動します。

テンプレートなのでゲームとしての中身はないですが、一応プレイヤーキャラを操作できるようにだけはしておきました。

このテンプレートの特徴としては

  • タイトル画面、ゲーム画面、ポーズ画面、ゲームオーバー画面の切り替え
  • 時間のカウントダウン
  • 音の再生
  • ツイート機能

最低限ゲームらしく見える機能はあると思うので、あとは何かしらゲーム要素を付け加えれば立派なゲームになってくれると思います(*´ω`)

あと、音に関してですが、私はネットで見つけた無料で使える音源を使わせてもらってるのですが、それを一緒に配布することは出来ないので、プログラム内の音関係のところはすべてコメントアウトしてあります(そうしないとエラーになるので)。なので音を鳴らしたい場合はご自身で音源を用意してコメントアウトを解除してください(‘ω’)ノ

プログラム

一応プログラムの一部を載せときます。こんな感じになっとります。

あとがき

ゲーム作ったことないけど作ってみたいと思っている方はぜひ一度試してみてください(‘ω’)ノ

あと、enchant.jsの良い点を一つ上げるとしたら軽いことです。サクッと作ってサクッと実行してサクッと公開できます(自分のサイトがあればだけど)。まぁ他の環境で作ったことないんだけど(;´∀`)(でもunityのゲームってなかなか始まらなくてちょっとイライラしない?)

まぁそんなさっくり作れる感じなので他の環境でブイブイ言わしてる方も軽い気持ちでやってみたりして欲しいです(*´ω`)

enchant.jsで簡単な紙芝居風ストーリーシーンを作って遊ぼう!

enchantjs講座

今回は私が使っている紙芝居風ストーリーシーンのプログラムを紹介しちゃいます(*´ω`)

これは私のおバカゲームに必ずあるアホなオープニングやエンディングに使われる紙芝居風のシーンのプログラムです。リンク張っておくので一度ゲームを遊んでください↓

一枚の静止画を切り替えていくだけで大した機能もないですが、一応効果音やBGMも絵の切り替えに合わせて入れられるようになってます。

うまく使えば音付きのマンガみたいな感じにもできたりすると思うので挑戦してみてください

プログラムはこんな感じ

簡単に説明するよ

このプログラムは画面にタッチするたびにstory_data配列の内容を読み込んで画面に表示してます。

story_data配列のimageは画像、messageはメッセージ、seは効果音、bgmはBGMです。それぞれ必要な時だけ記述する。

メッセージで使えるのは全角のみ。半角スラッシュを改行文字にしてます。

そんだけ。あとはプログラムを読んで理解してくれ(^^;)

あとがき

画像が切り替わるだけのショボいプログラムですがうまく使えば結構楽しめると思います。

うまく改造すればサウンドノベルゲームなんかも作れると思います、たぶん。作ったことないから知らんけど(^^;)

enchant.jsのGroupクラスはとっても便利

enchantjs講座

enchant.jsでゲームを作っていて気付いたのがGroupクラスの便利さ。

実は最初は使い方が分からずあんまり使っていなかったんですが、何度か使っているうちに「そう使うものだったのか!」という発見がありました(;´∀`)

というわけで私なりに気づいたGroupの使い方を説明したいと思います。

Groupは親になる

まずGroupとは何かって話ですが、簡単に言うと要素の親になります。スプライトを画面に表示する際にaddChild()を使っていますが、綴りの通り子をくっつけているわけです。つまりルートシーンにaddChildするとルートシーンが親になります。

で、Groupを使うときはGroupにaddChildします。そうすることでGroupが親になります。

ちょっと何言ってるかわからない、ってなってるかもしれませんがenchant.jsではaddChildされた要素は親要素に対して座標を持ちます。つまりシーンにaddChildされるとシーンに、GroupにaddChildされるとGroupに対しての座標になります。

Groupの座標を変えるだけで済む

enchant.jsではスプライトなどが持つ座標は画面に対しての絶対座標ではなく、相対座標になっています。つまり、

親が動けば子も動く

ということです。例えばこんな感じのメッセージボックスを表示させたい場合

Groupを使ってこのメッセージボックスを作ると後で表示位置を変えたくなった時にGroupの座標を変えるだけで済みます。Groupの座標を変えるだけで子の要素も移動します。なぜなら子の要素は親の座標を基準にした座標になるからです。

さらに便利なことはGroupを拡大・縮小すると子要素も同じくそうなります。

あとがき

ちょっと親子関係について説明が下手で内容が伝わっていないんじゃないかと不安です(-_-;)

一応、親子関係でいうとGroupの親はシーンでシーンの親は画面になります。つまりシーンすら画面に対しての座標を持つので動かせます。

Groupを上手く使えば大きなキャラだって自由自在に動かせる!?はずです(^^;)