tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step00 ゲームのひな形を作ろう

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

step00

このエントリーをはてなブックマークに追加
Pocket

まず最初に tmlib.js でゲームを作る際のひな形を作っていきます. とても簡単なので気軽にやってみてください.

Table of contents

チュートリアル目次

前半

後半

サンプル

今回作るサンプルです.

まだ表示するオブジェクトの生成などはおこなっていないので 真っ白な画面が生成されているだけです.

up

ソースコード

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();
    },
});

up

解説

定数を設定する

スクリーンのサイズや表示物のサイズといった ゲーム中変化しない値は定数化しておきましょう.

定数化しておくことでコードの見通しがよくなったり, 後々値を変化させたいといったときに調整が楽になります.

/*
 * 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 を呼ぶのを忘れないようにしましょう.

up

ここまでで疑問に思ったことやエラーで動かないなどありましたら, 気軽に @phi_jpまでご連絡ください.

次回はピースクラスの定義, 表示まわりの実装を行います. 一気にゲームっぽくなる Step なので引き続き頑張りましょう♪

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT