トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

JavaScript/tmlib.js のバックアップ(No.38)

次のイベントに参加して色々教えていただきました。
【TechBuzz】tmlib.js hackthon #1 〜JavaScript をより使いやすく, より便利に, そしてより豊かにをモットーとする「tmlib.js」のハッカソンイベント開催〜
スライドショー


tmlib.jsとはPC/iPhone/Androidなどのブラウザで動くwebアプリを開発できるJavaScriptライブラリです。 もちろんテキストエディタとFTPソフトとかで開発できるのですが、今回はjsdo.itというブラウザ上でhtml/css/JavaScriptなどの開発が行えるwebサービスで開発しました。 こちらが目からウロコでして、次のような手順で簡単に開発できました。

  1. twitter, facebookなどでjsdo.itにログイン
  2. 自分用のフォルダ名を入れる(私はpapuujp)
  3. Start codingボタンを押すと、最低限のindex.html, index.js, style.cssがサーバ上で作られ、ブラウザで編集可能となる
  4. +ボタンで使いたいJavaScriptライブラリ(jQuery Mobile, tmlib.js, enchant.jsなど)を追加する
  5. index.jsに作りたいコードを書いて、command + s(mac)やcontrol + s(windows)で保存すると、プレビューウィンドウで表示される

jsdo.itの何がいいかというと、FTPでアップしなくてもサーバ上ですぐに公開された状態で試せることです。 例えば今回作ったサンプルはこちらとなります。マウスやスマホ上の指スライドで自機を左右に動かし、星を避けるゲームです。
http://jsrun.it/papuujp/star-game2
ソースも公開できて、こちらとなります。非公開とすることも可能です。
http://jsdo.it/papuujp/star-game2
jsdo.itを使うとiPadでもwebアプリ開発が行なえますし、JavaScriptやjQuery Mobileなどの実習形式の勉強会とかでも手軽に使えそうです。
（デバッグ機能が弱いので、そちらはGoogle Chrome Developerツールを一緒に開けばいいということも教えていただきました。とても便利でした）

tmlib.js自身は次のように色々な可能性を感じました。

  • 手軽に試せる
  • アニメーションとかが得意
  • スマホタッチやPCでのマウス操作の違いを吸収して両対応のwebアプリを作れる
  • AppStoreとかに公開しないでもすぐにリッチなwebアプリを公開できる
  • facebookアプリも作れそう
  • Titanium MobileのWebViewに入れて、画面表示をリッチに使えそう


tmlibで何が作れるかは、ピンきりですが次でお試しください。
http://jsdo.it/search?q=tmlib

オススメのチュートリアル

phi氏自身のチュートリアルがとても分かりやすくてオススメです。また改造された方のゲームも参考になります。


こちらのtmlib.jsを用いたシューティングゲーム作成講座動画も一からコードを書いていて分かりやすいです。


こちらのチュートリアルもオススメです。ネームスペースを区切っていて行儀がいいコードみたいです。ただしシーンの定義は数字タッチゲームサンプルのように「tm.define()」を使った方が新しいようです。詳しい違いはよく分かりません。

↑

クラスについて

最初「tm.createClass()」で作っていたのですが「tm.define()」を使うのがいいそうです。


ネームスペース（名前空間）をきっちりと分けてクラス定義する方法は次のサンプルが分かりやすかったです。ただしライブラリ開発でなくアプリ開発の場合は、ネームスペースを分けない方がソースが見やすくていいかもしれません。


次のように全体を即実行関数として他のライブラリから見えなくするのが分かりやすくて良さそうです。（参考としたソース 改造 tmlib 数字ゲーム）

(function TouchTheNumber() {
	// screen 
	var SCREEN_WIDTH    = 680;
	var SCREEN_HEIGHT   = 960;
	...
	... tm.main()や各シーンの定義
	...
})();
↑

アニメーションについて

↑

tm.app.Tweener

tm.app.Tweenerを用いると相対的な時間軸でアニメーションを積み重ねて表現できます。引数など詳しくはソースを見るのが良さそうです。

↑

tm.app.Timeline

tm.app.Timelineを用いると絶対的な時間軸でアニメーションを表現できます。引数など詳しくはソースを見るのが良さそうです。

↑

tm.app.Timelineの主なメソッド

  • clear: それまでのアニメーションをクリア
  • set: アニメーション無しで指定した値に設定
  • to: 指定した値までアニメーション
  • by: 足した値までアニメーション
↑

to, byそれぞれの引数

  • props: 目指す値または足す値を{}に記述 x, y, scaleX, scaleY, alpha
  • duration: アニメーション時間を指定（ミリ秒）
  • delay: アニメーション開始時間を指定（ミリ秒）
  • fn: "easeOutExpo"といったアニメーションのかけ方（イージング）を指定
↑

イージング

"easeOutExpo"といったアニメーションのかけ方です。

↑

スニペット

↑

メイン処理

// main 処理
tm.main(function() {
    alert("tmlib.js ちゃんと使えてるよ〜ん♪");
});
↑

クラス定義

var Hoge = tm.createClass({
    init: function(num) {
        this.num = num;
    },
    toString: function() {
        return "私の数値は{num}です!!".format(this);
    }
});
var hoge = Hoge(128);
document.write(hoge.toString());
document.write("<br />");
↑

エネミークラス定義

配列変数enemyListを使った敵処理が勉強になったのでソース一部を引用しました。次の点に注意して見ると勉強になります。

  • enemyListを初期化する位置 ... メインシーンの初期化処理
  • enemyListの中に入れるEnemyクラスの定義方法
  • Enemyインスタンスの生成、シーンおよびenemyListへの追加
  • EnemyインスタンスのシーンおよびenemyListからの削除 シューティングゲームの全コードはJavaScript/tmlib.js/sample/避けゲー(開始, 終了画面あり)に引用させていただいてます。オリジナルはこちらです。

#pre{{
/*
* グローバル変数
*/
var enemyList = null;

/*
* エネミー
*/
var Enemy = tm.createClass({
superClass: tm.app.StarShape,
// 初期化
init: function() {
this.superInit(PLAYER_SIZE, PLAYER_SIZE);
},
// 更新
update: function(app) {
this.y += 8; // 移動
this.rotation += 15; // 回転
// 削除判定
if (this.y > SCREEN_HEIGHT) {
this.remove();
enemyList.erase(this);
}
}
});

// メインシーン
var MainScene = tm.createClass({
superClass: tm.app.Scene,
init: function() {
this.superInit();

enemyList = [];

// プレイヤー
this.player = Player();
this.addChild(this.player);
this.player.x = SCREEN_CENTER_X;
this.player.y = SCREEN_HEIGHT-100;
},

update: function() {
// エネミー生成
if (app.frame % 8 == 0) {
// エネミー
var enemy = Enemy();
enemy.x = tm.util.Random.randint(0, SCREEN_WIDTH);
enemy.y = -50;
this.addChild(enemy); // シーンに追加
enemyList.push(enemy); // リストに追加
}

// プレイヤー, エネミー衝突判定
for (var i=0,len=enemyList.length; i<len; ++i) {
var enemy = enemyList[i];
// 衝突判定
if (this.player.isHitElement(enemy)) {
// Game Over
app.replaceScene(ResultScene());
}
}
}
});
}}

↑

リンク