画面を表示しよう！
サンプル
コードの解説
まず最初に、実行するmain.jsと、HTMLファイルであるindex.htmlファイルを作ってから始まります。中に記述しているコードは次のようになってます。
<!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" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>タッチゲーム制作チュートリアル</title>
<script src="http://rawgithub.com/phi1618/tmlib.js/6ee7b4d17ea0c0edac203920fb80bb755fa1cf18/build/tmlib.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<canvas id="world"></canvas>
</body>
</html>
HTMLでtmlib.jsのロードを行なっています。tmlib.jsを利用するにはcanvasを作っておかないといけません。準備はこれだけです。次は実際にtmlib.jsを動かすコードとなります。
/**
* ゲーム起動処理
*/
var game = game || {};
(function(ns) {
tm.main(function() {
// スクリーンサイズ
ns.SCREEN_WIDTH = 640;
ns.SCREEN_HEIGHT = 960;
// アプリケーション作成
ns.app = tm.app.CanvasApp("#world");
ns.app.resize(ns.SCREEN_WIDTH, ns.SCREEN_HEIGHT); // 画面サイズに合わせる
ns.app.fitWindow(); // リサイズ対応
ns.app.background = "rgb(0, 0, 0)"; // 背景色をセット
// tmlibの実行
ns.app.run();
});
})(game);
tm.main関数からアプリケーションの処理を開始していきます。スクリーンサイズなどのアプリケーションの設定を行ってapp.run()を行うことで、アプリケーション実行開始です。画面を表示する儀式と思ってもらえたらと思います。
もうちょっと詳しく解説
var game = game || {};
(function(ns) {
tm.main(function() {
// スクリーンサイズ
ns.SCREEN_WIDTH = 640;
// 以下続く...
});
})(game);
main.jsの記述ですが、人によると見慣れない書き方がいくつかあるかと思います。
var game = game || {};
これはネームスペースと言われるもので、このgameという変数の中に全てデータをいれこんでいきます。なのでグローバル領域を汚しません。
(function(ns) {})(game);
これも同じくネームスペースの処理ですね。関数の中に変数を閉じ込めています。よく分からない！という方はオマジナイだと思ってもらって差し支えはありません。
定数を別ファイルに分けよう
サンプル
コードの解説
ゲームを起動するために使った値は、今後ゲームを新しく作る際に作りやすいよう別ファイルで管理しましょう。新しくparam.jsというファイルを作るので、HTMLのコードを書き換えます。
<!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" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>タッチゲーム制作チュートリアル</title>
<!-- tmlib.js -->
<script src="http://rawgithub.com/phi1618/tmlib.js/6ee7b4d17ea0c0edac203920fb80bb755fa1cf18/build/tmlib.js"></script>
<!-- game -->
<script src="js/param.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<canvas id="world"></canvas>
</body>
</html>
新しくファイルを追加したので、読み込むJavaScriptのファイルが増えましたね。param.jsというファイルにmain.jsファイルの記述を移します。
/**
* ゲーム用ネームスペース作成、定数作成
*/
var game = game || {};
(function(ns) {
// スクリーンサイズ
ns.SCREEN_WIDTH = 640;
ns.SCREEN_HEIGHT = 960;
})(game);
/**
* ゲーム起動処理
*/
// var game = game || {};
(function(ns) {
tm.main(function() {
// // スクリーンサイズ
// ns.SCREEN_WIDTH = 640;
// ns.SCREEN_HEIGHT = 960;
// アプリケーション作成
ns.app = tm.app.CanvasApp("#world");
ns.app.resize(ns.SCREEN_WIDTH, ns.SCREEN_HEIGHT); // 画面サイズに合わせる
ns.app.fitWindow(); // リサイズ対応
ns.app.background = "rgb(0, 0, 0)"; // 背景色をセット
// tmlibの実行
ns.app.run();
});
})(game);
main.jsファイルで記述していた変数を別ファイルに移しました。ゲームを作る上で必ず必要になるようなデータはparam.jsに記述するようにすれば、管理がしやすくなるので今のうちにやっておきます。
nsという変数に直接登録した変数は、nsを呼び出すことで変数を使うことができます。次のようにです。
ns.app.resize(ns.SCREEN_WIDTH, ns.SCREEN_HEIGHT); // 画面サイズに合わせる
param.jsファイルでスクリーンサイズに関する変数を登録しているので、main.jsファイルからでもnsを通して呼び出せるようになります。