By U Zensen.

欲しいものはプログラミングで自分で作る。

10分でできる!!Monacaとtmlib.jsでゲームアプリを作る環境を作る方法!!

2015 / 7 / 1 2016 / 8 / 7
アプリ制作
1437922048203644

はじめに!!

初めましてぴーすけと申します。

私ごとになりますが、今年の目標としてハイブリットアプリを開発し、公開をするという目標があります。そして私が作りたいアプリはゲームアプリです。構想はいろいろありますが、とりあえずは開発環境を整える必要があります。

そこで私が選んだのが、開発プラットフォームとしてブラウザがあればどこでも簡単に開発ができ、HTML5、JavaScriptで作成することができる「Monaca」とゲーム開発用のJavaScriptライブラリである「tmlib.js」を使用することにしました。

【注意】

この記事は2015/7/1に実際に「Monaca」や「tmlib.js」を使うための設定や登録を行い、その過程を書いたものになります。今後「Monaca」や「tmlib.js」に変更があれば登録や使用方法が変わるかもしれないので、ご注意ください。

※ 登録、設定、動作テストなどはすべて「imac」と「iphone5」で行いました。他のデバイスやOSでは多少異なる場合もありかもしれません。

Monacaに登録する!!

Monacaは、アプリ開発環境をクラウドサービスとして提供します。必要なものはWebブラウザだけ。開発環境のセットアップなしにアプリ開発が始められます。
(Monaca公式サイトより)

ということで、まずは「Monaca」にアカウントを登録して、開発環境を作ります。「Monaca」のURLはこちらです。以下の画像の赤枠で囲われた「今すぐ試す」をクリックします。

monaca_tmlib_1

そうすると以下のような画面が出てくるので、必要事項を記入して「いますぐ登録」です。ちなみに、icloud.comのアドレスだと登録ができませんでした。なぜだろう…

monaca_tmlib_2

登録が完了すると、登録したメールアドレスに確認メールが届きます。そのメールに載せられたURLからユーザ確認を行うことができます。メールアドレスとパスワードを入力し、名前などの各項目の入力が完了すると、いよいよ開発が開始できるようになります。

以下の画面がプロジェクト画面になります。元からテスト用のプロジェクト「Hello Worldアプリ」というプロジェクトが作られていて動作確認をすることができます。以下の「開く」をクリックしてみてください。

monaca_tmlib_3

プロジェクトが開かれると、左にディレクトリ階層が表示され、右に「index.html」のソースコードが表示されます。そして、以下のようなダイアログが表示されるので、お手元のスマートフォンでQRコードを読み取り「Monacaアプリ」をインストールしてください。

monaca_tmlib_4

以下はPC側でプレビューを行っていますが、先ほどスマートフォンの「Monacaアプリ」をインストールしていた場合はアプリの方で動作を確認することができます。

monaca_tmlib_5

これでとりあえず開発環境がつくられました。詳しくはまだ触っていないのでわかりませんが、この「index.html」を編集することでアプリを作ることができるはずです。

tmlib.jsを使えるようにする!!

tmlib.jsを使うための設定はとても簡単です。とりあえずtmlib.jsのURLはこちらです。とてもかわいいイラストが印象的です。以下のサイトへアクセスし、「Usage」をクリックします。

monaca_tmlib_6

そうすると以下のようなソースコードが記述された画面が表示されるかと思います。

monaca_tmlib_7

上記のソースコードを丸々先ほどのMonacaの「index.html」に記述すればtmlib.jsが使える状態になります。コピーしてプレビューをしてみてください。

tmlib.jsのソースコードで大切な部分はおそらく以下の部分になると思います。

<script src="http://cdn.rawgit.com/phi-jp/tmlib.js/0.3.0/build/tmlib.js"></script>

この部分によりtmlib.jsのライブラリを取得してきています。jQueryなんかもこのようにライブラリを取得してくる方法がありますよね。

tm.main(function() {
    alert("tmlib.js バッチリ読み込まれてるよ!!");
});

そして上記のスクリプト内のコードが動くことでtmlib.jsが読み込まれていることが確認できます。正常に読み込まれていれば「tmlib.js バッチリ読み込まれてるよ!!」というダイアログが表示されるはずです。ライブラリをローカルにダウンロードして使用する方法もありますが、とりあえずはこの方法で使って行きます。

tmlib.jsのサンプルを使ってそれっぽく動かしてみる!!

tmlib.jsの認知度はまだ低く、書籍などの資料はあまり見つかりませんでした。しかし、先駆者の皆さんが公開しているソースコードや公式サイトに様々なサンプルがおいてあるのでそれを参考に勉強することができそうです。

そこで、公式サイトに置いてあるサンプルをMonacaに記述してみて動かしてみました。使用したコードはこちらに掲載されていた「Walk」に記述されているものをそのままMocanaに移植しました。

少しながくなりますが、私が「Monaca」に記述したソースコードは以下の通りとなります。これをそのままそっくりコピーすれば動くはずです!ちなみに「tmlib-main.js」は新しくファイルを作成してそこに記述しています。

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" /> <title>test</title> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script src="http://cdn.rawgit.com/phi-jp/tmlib.js/0.3.0/build/tmlib.js"></script> <script src="tmlib-main.js"></script> </head> <body> <canvas id="world"></canvas> </body> </html>

tmlib-main.js

var SCREEN_WIDTH = 465; // スクリーン幅 var SCREEN_HEIGHT = 465; // スクリーン高さ var SCREEN_CENTER_X = SCREEN_WIDTH/2; // スクリーン幅の半分 var SCREEN_CENTER_Y = SCREEN_HEIGHT/2; // スクリーン高さの半分 var ASSETS = { "player": "http://cdn.rawgit.com/phi-jp/tmlib.js/9779c20e068c6bc36fc590c108642f96ce7ffc0e/resource/img/piyoto.png", "bg": "http://jsrun.it/assets/a/G/5/Y/aG5YD.png", }; var SPEED = 4; /* * main */ tm.main(function() { var app = tm.display.CanvasApp("#world"); app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); app.fitWindow(); // ローダーで画像を読み込む var loading = tm.ui.LoadingScene({ assets: ASSETS, width: 465, height: 465, }); // 読み込み完了後に呼ばれるメソッドを登録 loading.onload = function() { app.replaceScene(MainScene()); }; app.replaceScene(loading); app.run(); }); tm.define("MainScene", { superClass: "tm.app.Scene", // 初期化 init: function() { this.superInit(); // bg this.bg = tm.display.Sprite("bg").addChildTo(this); this.bg.origin.set(0, 0); // assets で指定したキーを指定することで画像を表示 this.player = tm.display.Sprite("player", 64, 64).addChildTo(this); this.player.setPosition(400, 400); this.player.frameIndex = 12; }, // 更新(毎フレーム呼ばれる) update: function(app) { var p = app.pointing; var diff = this.player.x - p.x; // タッチしているかどうかを判定 if (p.getPointing()) { if (Math.abs(diff) > SPEED) { if (diff < 0) { this.player.x += SPEED; this.player.scaleX = -1; } else { this.player.x -= SPEED; this.player.scaleX = 1; } if (app.frame % 4 == 0) { this.player.frameIndex = (this.player.frameIndex==12) ? 13:12; } } } else { this.player.frameIndex = 0; } }, });

まとめ!!

10分は言いすぎたかもしれないけど、開発環境を構築することができました!!

とりあえず動かしたくてコピーして作ったものなので、なにをしているのかほとんどわかっていませんが動作を確認することもできました。まだソースの書き方などはほとんど分かっていませんが、少しずつ勉強してここで報告を兼ねてまとめたいと思います。

Pocket

コメント

コメントを残す