tmlib.js入門用チュートリアル!避けゲーを作ってみよう
はてなブックマーク - tmlib.js入門用チュートリアル!避けゲーを作ってみよう
Pocket

上から落ちてくるモンスターを避ける、というシンプルな避けゲーを作るチュートリアルです。tmlib.jsでサクッと作っちゃいましょう。最終的に作るゲームは以下のサンプルになります。

(続きを読む…)

node.js 怒濤の50サンプル!! – socket.io編
はてなブックマーク - node.js 怒濤の50サンプル!! – socket.io編
Pocket

node.jsを使ったサンプル集です。ゲーム制作でサンプル作ってたら溜まったので整理がてら公開します。node.jsをローカルで実行できる環境を作ってない方は、「初心者でも安心!?Node.jsをインストールするなら仮想サーバを使おう」を参考にしてみてください。また、socket.ioやmongoDBを利用する際は、都度インストールしてください。

 
※ タイトルを「node.js 怒濤の50サンプル!! – websocket編」から「node.js 怒濤の50サンプル!! – socket.io編」に変更
※ 厳密には異なるものとは知らず誤解を招くタイトルだったためです。申し訳ありません。
 

 
 

 
 

(続きを読む…)

05:「ゲームの処理を作ろう」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
はてなブックマーク - 05:「ゲームの処理を作ろう」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
Pocket

モンスターを表示しよう

サンプル

コードの解説

モンスターを表示して動かしてみます。プレイヤークラスと同じような要領でクラスを作成します。

まずはじめに、プレイヤークラスを追加したやり方と同じように画像を読み込みます。

MainSceneクラスでは、モンスターのクラスであるEnemyクラスを複数入れるグループを追加します。

モンスターは複数作るので、グループ用の変数enemyGroupを作っておきます。モンスターは時間経過にともなって生成していくので、スコアの計算と併用するtimer変数も用意しておきましょう。

そして、ゲームの処理が行われるたびに処理されるupdate関数を作ります。

時間を計るtimerのカウントアップと、モンスターの生成処理を行なっています。モンスターを作るタイミングになればEnemyクラスを使ってモンスターを生成します。生成したモンスターは、モンスターのグループに入れることで画面に描画されるようになります。複数のオブジェクトを管理したいときは、このようにグループを使うと便利です。
 
次はEnemyクラスです。

init関数は、クラスを使うときに最初に処理される関数でした。なので、init関数内でモンスターが落ちてくるスピードをランダムに決定しています。

このランダムに決定したスピードを使って下へ移動する処理を作ります。移動処理もゲーム処理が実行されるたびに処理されるupdate関数に書きます。

スピードの分だけY座標を足していけば、モンスターが落ちてくるように動かすことができますね。なお、画面から見えなくなったらモンスターを消す処理も入れています。
 

これだけでも、何となくゲームの形になってきました。次はプレイヤーを動かせるようにしていきます。

プレイヤーを動かせるようにしよう

サンプル

コードの解説

タッチするたびに、プレイヤーの移動方向が逆になるようにします。

まずは、MainSceneをタッチするとEndSceneに移動する処理を消しておきます。

次はプレイヤーの処理です。プレイヤーが最初に移動する方向をinit関数で決めておきます。

そして、update関数で移動処理を作っていきます。タッチを認識したら移動する方向を変えるようにします。

app.pointing.getPointingStart()関数を呼び出すことで、タッチされたかどうかが分かります。タッチされたらdirect変数の中のデータ、”left”と”right”を入れ替えましょう。そして、現在どっちを向いているのかをswitchで判定したら、実際にプレイヤーを動かしていきます。

“left”だったら左方向に移動+アニメーション、”right”だったら右方向に移動+アニメーション、という具合ですね。そして最後に、画面外に出られないようにする処理を呼び出しています。

画面外に出てしまうような移動を行なっていたら、画面に収まる位置に戻すようにしています。これでプレイヤーが画面外に出ることはできません。

モンスターと接触したらゲームオーバーにしよう

サンプル

コードの解説

忘れてはならないのがプレイヤーとモンスターの当たり判定です。モンスターと接触したら、即ゲームオーバーにします。

ついでなので、生き残っている時間を表示するようにしておきます。

表示している文字を途中で変更したいときは、上記のように書きます。次はモンスターとプレイヤーの当たり判定です。

each関数を使うことで、enemyGroupに登録しているモンスター全てに対して行う処理を書くことができます。each関数に当たり判定の処理を渡すことで、簡単に総当りの当たり判定が作れますね。当たり判定の処理はtmlib.jsが用意していますので、たった一行で書くことができます。

敵とヒットしてゲームオーバーになったら生き残った時間をそのまま使ってスコアにしたいですね。そこで、EndSceneに生き残った時間を渡す処理を書きます。

生き残った時間を受け取る処理は次のように書きます。

このように、init関数は引数としてデータを受け取ることができます。受け取った値を使ってスコアを表示しましょう。

これで生き残った時間を表示できるようになりました。ゲームとしてはこれで完成ですがちょっとした味付けを次項でやってみます。

Ex:「音をつけよう & iPhoneを傾けたら移動するようにしてみよう」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
はてなブックマーク - Ex:「音をつけよう & iPhoneを傾けたら移動するようにしてみよう」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
Pocket

BGMを再生しよう

サンプル

コードの解説

tmlib.jsは音の再生もサポートしているので、BGMを鳴らしてみます。

画像と同じように音楽もロードすることができます。MainSceneが開始するときにBGMがなり始めるようにします。

ボリュームやBGMをループして再生する設定など行った後、play関数で音の再生を開始します。

 

このままだと、EndSceneになってもBGMが鳴り続けてしまいます。EndSceneに遷移する前にBGMをストップしておきます。

ジャイロセンサーを使って、スマートフォンを傾けても移動できるようにしよう

サンプル

コードの解説

ジャイロセンサーとは、iPhoneの傾きを検知するセンサーです。tmlib.jsでは、このセンサーをゲームに応用しやすいようにしてくれています。

しかし、プレイヤークラスのupdateを上記の処理にそのまま書き換えてしまうとPCではプレイヤーを操作することはできません。その対策として、PC用のupdateとスマートフォン用のupdateを別に作っておきます。そして、スマートフォンなのかPCなのかを判断してupdateを適切にセットすると、とりあえずiPhoneとPCの区別をつけることができます。

「正確にジャイロセンサーが付いていたら、ジャイロセンサーを使った操作に切り替える」という処理ではないので気をつけてくださいね。

 
 

これでチュートリアルは終了です。お疲れ様でした!落ちゲーのゲームも色々処理を追加しようと思えばたくさん思いつくとおもいます。このチュートリアルでゲームを作り始めてくれたりするととても嬉しいです。

04:「画像を表示してアニメーションさせてみよう(スプライトアニメーション)」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
はてなブックマーク - 04:「画像を表示してアニメーションさせてみよう(スプライトアニメーション)」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
Pocket

ローディング画面を使って画像を読み込もう!

サンプル

コードの解説

タイトル画面が表示される前に、ローディングの画面を挟んで画像をロードしてみます。

このように読み込みたい画像のURLを書いた変数、ASSETSを用意します。ASSETSの”backMap”とは画像の別名です。画像に別名をつけることで、URLを変更しても他のプログラム箇所は書き換えなくてよくなっています。

画像を表示しよう

サンプル

コードの解説

画像を表示してみます。マップの画像を表示させてみましょう。

これで画像を表示することができました。次はアニメーションをさせてみましょう。

スプライトアニメーションをさせてみよう

サンプル

コードの解説

プレイヤークラスを用意しちゃいましょう。初めて自分用のクラスを作りますが、作り方は既存のクラスの拡張と同じです。

画像の追加や、MainSceneへの処理の追加はMapクラスと同じですね。今回違うのは、プレイヤークラスの作り方です。プレイヤークラスをちょっと詳しくみてみましょう。

プレイヤーのサイズを変数として作っています。サイズは幅20pixel x 高さ16pixelです。画像全体の大きさではないことに注意してください。キャラクターのサイズです。画像を見ると分かりますが、一つ一つの動きごとに絵が書かれているので画像を見たほうが分かりやすいでしょうか。

 

 

流用するクラスは”tm.app.AnimationSprite”となっています。これはスプライトアニメーションを簡単に行えるようにtmlib.jsが用意しているクラスです。
 

superInitにアニメーションの仕方を記述しているファイルである”playerSS”を渡すことで、アニメーションができるようになります。

サイズを4倍にしているのは、プレイヤーの表示を大きくするためです。元の画像が小さいので。
 
これでアニメーションの準備は終わりです。次のコードでアニメーションが開始されます。

“left”を指定することで、左方向に移動しているようなアニメーションが再生されます。実際にindex.htmlをブラウザで開くとアニメーションされますのでチェックしてみてください。

 

次は、アニメーションの仕方を指定する方法です。アニメーションの仕方は”playerSS”ファイルに書かれています。中身はこんな感じです。

jsonファイルの形式になっています。画像名や画像のサイズ、アニメーション方法などをまとめて書いています。