tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step00 ゲームのひな形を作ろう
まず最初に tmlib.js でゲームを作る際のひな形を作っていきます. とても簡単なので気軽にやってみてください.
Table of contents
チュートリアル目次
前半
後半
サンプル
今回作るサンプルです.
まだ表示するオブジェクトの生成などはおこなっていないので 真っ白な画面が生成されているだけです.
ソースコード
index.html
HTML 部分です. tmlib.js と main.js を読み込むだけです. HTML に関してはこれで完成です. これ以降の Step では一切いじりません.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>FlaTM Touch | tmlib.js</title> <script src= "http://rawgithub.com/phi1618/tmlib.js/0.1.7/build/tmlib.js"></script> <script src="scripts/main.js"></script> </head> <body> <canvas id="world"></canvas> </body> </html>
main.js
スクリプト部分のコードです. 詳しい解説は下へ.
/* * main.js */ /* * contant */ var SCREEN_WIDTH = 680; // スクリーン幅 var SCREEN_HEIGHT = 960; // スクリーン高さ var SCREEN_CENTER_X = SCREEN_WIDTH/2; // スクリーン幅の半分 var SCREEN_CENTER_Y = SCREEN_HEIGHT/2; // スクリーン高さの半分 /* * main */ tm.main(function() { // アプリケーションセットアップ var app = tm.app.CanvasApp("#world"); // 生成 app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // サイズ(解像度)設定 app.fitWindow(); // 自動フィッティング有効 app.background = "rgba(250, 250, 250, 1.0)";// 背景色 app.replaceScene( GameScene() ); // シーン切り替え // 実行 app.run(); }); /* * ゲームシーン */ tm.define("GameScene", { superClass: "tm.app.Scene", init: function() { this.superInit(); }, });
解説
定数を設定する
スクリーンのサイズや表示物のサイズといった ゲーム中変化しない値は定数化しておきましょう.
定数化しておくことでコードの見通しがよくなったり, 後々値を変化させたいといったときに調整が楽になります.
/* * contant */ var SCREEN_WIDTH = 680; // スクリーン幅 var SCREEN_HEIGHT = 960; // スクリーン高さ var SCREEN_CENTER_X = SCREEN_WIDTH/2; // スクリーン幅の半分 var SCREEN_CENTER_Y = SCREEN_HEIGHT/2; // スクリーン高さの半分
HTML5 Canvas用アプリケーションを生成
tmlib.js には Canvas をベースにゲームを作るために tm.app.CanvasApp というクラスが定義されています.
これを使うことで画面サイズの調整や, 更新, 描画処理といったことを簡単に行うことができるようになります.
/* * main */ tm.main(function() { // アプリケーションセットアップ var app = tm.app.CanvasApp("#world"); // 生成 app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // サイズ(解像度)設定 app.fitWindow(); // 自動フィッティング有効 app.background = "rgba(250, 250, 250, 1.0)";// 背景色 app.replaceScene( GameScene() ); // シーン切り替え // 実行 app.run(); });
Scene を継承して GameScene クラスを作ろう
tmlib.js では tm.define というメソッドがあり, これを使うことで C++ や Java に近い記法でクラスを定義することができます.
/* * ゲームシーン */ tm.define("GameScene", { superClass: "tm.app.Scene", init: function() { this.superInit(); }, });
第一引数にクラス名, 第二引数に拡張する情報を渡します. 第二引数の superClass は継承元となるクラスを指定します. init は生成時に実行されるコンストラクタとなります.
クラス継承する際は親の初期化を呼び出す superInit を呼ぶのを忘れないようにしましょう.
ここまでで疑問に思ったことやエラーで動かないなどありましたら, 気軽に @phi_jpまでご連絡ください.
次回はピースクラスの定義, 表示まわりの実装を行います. 一気にゲームっぽくなる Step なので引き続き頑張りましょう♪
[…] Step00 ゲームのひな形を作ろう (サンプル) […]
[…] Step00 ゲームのひな形を作ろう (サンプル) […]
[…] Step00 ゲームのひな形を作ろう (サンプル) […]
[…] Step00 ゲームのひな形を作ろう (サンプル) […]
[…] Step00 ゲームのひな形を作ろう (サンプル) […]
[…] Step00 ゲームのひな形を作ろう (サンプル) […]
とてもわかり易いチュートリアルを有難うございます!
新しいChromeでは noteOn/noteOffなどが使えなくなっているみたいです。start/stopに変えると一応動きました。
http://stackoverflow.com/questions/17394630/audiobuffersourcenode-start-vs-noteon
http://updates.html5rocks.com/2014/07/Web-Audio-Changes-in-m36
ご対応頂けると大変有り難いです。
失礼しました! 最新版(0.3.0)では既に対応済みでしたね。
https://github.com/phi-jp/tmlib.js/blob/develop/src/sound/webaudio.js
最新版に差し替えたら問題なく再生されました。