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