game JavaScript tmlib.js Tutorial

01:「最初の一歩、画面を表示しよう」 – tmlib.js入門用チュートリアル！避けゲーを作ってみよう

画面を表示しよう！

サンプル

コードの解説

まず最初に、実行する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>

        <!-- tmlib.js -->
        <script src="http://rawgithub.com/phi1618/tmlib.js/88b843853c9aa94d2a0a533478ed901264fa5bec/build/tmlib.js"></script>

        <!-- game -->
        <script src="js/main.js"></script>
    </head>
    <body>
        <canvas id="world"></canvas>
    </body>
</html>

HTMLでtmlib.jsのロードを行なっています。tmlib.jsを利用するにはcanvasを作っておかないといけません。準備はこれだけです。コレ以降、index.htmlは触りません。
　
次はmain.jsです。tmlib.jsを動かすJavaScriptのコードとなります。

/**
 * ゲーム用定数作成
 */
var SCREEN_WIDTH  = 960;
var SCREEN_HEIGHT = 640;

/**
 * ゲーム起動処理
 */
tm.main(function() {
    // アプリケーション作成
    var app = tm.app.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // 画面サイズに合わせる
    app.fitWindow(); // リサイズ対応
    app.background = "rgb(0, 0, 0)"; // 背景色をセット

    // tmlibの実行
    app.run();
});

tm.main関数からアプリケーションの処理を開始していきます。スクリーンサイズなどのアプリケーションの設定を行ってapp.run()を行うことで、アプリケーション実行開始です。画面を表示する儀式と思ってもらえたらと思います。

　
　

簡単に画面を表示することができました。

Leave a Reply Cancel reply