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

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

  • 追加された行はこの色です。
  • 削除された行はこの色です。
次のイベントに参加して色々教えていただきました。~
[[【TechBuzz】tmlib.js hackthon #1 〜JavaScript をより使いやすく, より便利に, そしてより豊かにをモットーとする「tmlib.js」のハッカソンイベント開催〜>http://atnd.org/events/34279]]~
[[スライドショー>http://www.rvl.io/phi/tmlibjs_hackathon/fullscreen#/]]

~
tmlib.jsとはPC/iPhone/Androidなどのブラウザで動くwebアプリを開発できるJavaScriptライブラリです。
もちろんテキストエディタとFTPソフトとかで開発できるのですが、今回はjsdo.itというブラウザ上でhtml/css/JavaScriptなどの開発が行えるwebサービスで開発しました。
こちらが目からウロコでして、次のような手順で簡単に開発できました。
+twitter, facebookなどでjsdo.itにログイン
+自分用のフォルダ名を入れる(私はpapuujp)
+Start codingボタンを押すと、最低限のindex.html, index.js, style.cssがサーバ上で作られ、ブラウザで編集可能となる
+ +ボタンで使いたいJavaScriptライブラリ(jQuery Mobile, tmlib.js, enchant.jsなど)を追加する
+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 Life>http://tmlife.net/programming/javascript/tmlib-js-flat-design-game-tutorial.html]]
-[[tmlib.js ゲームプログラミングチュートリアル – 今流行のフラットデザインを使ったタッチゲームを作ろう | jsdo.it phi氏>http://jsdo.it/phi/991f]]
-[[改造してみた - tmlib.js ゲームプログラミングチュートリアル – 今流行のフラットデザインを使ったタッチゲームを作ろう | jsdo.it omatoro氏>http://jsdo.it/omatoro/dktP]] ... Webフォント、パネルのグラデーションといった改造
-[[改造 tmlib 数字ゲーム | jsdo.it picowska氏>http://jsdo.it/picowska/dFFv]] ... 数字順に色相グラデーション、間違った数字を押したときのプルプル、正解済みのパネル消去
-[[tmlib.jsで簡単アニメーション | Qiita>http://qiita.com/omatoro/items/95d5d0624d1de7036526]]

~
こちらのtmlib.jsを用いたシューティングゲーム作成講座動画も一からコードを書いていて分かりやすいです。
-[[tmlib.jsでゲームを作ってみよう | nicozon動画リスト>http://www.nicozon.net/mylist/39031781]]

~
こちらのチュートリアルもオススメです。ネームスペースを区切っていて行儀がいいコードみたいです。ただしシーンの定義は数字タッチゲームサンプルのように「tm.define()」を使った方が新しいようです。詳しい違いはよく分かりません。
-[[JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを作るチュートリアル | TEST CORDING>http://testcording.com/?p=1342]]



*クラスについて
最初「tm.createClass()」で作っていたのですが「tm.define()」を使うのがいいそうです。
-[[tmlib.js におけるクラス定義 | Qiita phi氏>http://qiita.com/phi/items/04c4fae5a9a86dc4afc5]]
-[[サクッとプレイヤー移動 - tmlib.js 0.2.0 | jsdo.it phi氏>http://jsdo.it/phi/UI9F]] ... クラス使用例
-[[tm.define() を使いこなせ！〜 JavaScriptOO 用のユーティリティについて | typeOf 'aki_mana'>http://blog.livedoor.jp/aki_mana/archives/7360658.html]]

~
ネームスペース（名前空間）をきっちりと分けてクラス定義する方法は次のサンプルが分かりやすかったです。ただしライブラリ開発でなくアプリ開発の場合は、ネームスペースを分けない方がソースが見やすくていいかもしれません。
-[[星が散るエフェクト - tmlib.js 0.2.0 | jsdo.it omatoro氏>http://jsdo.it/omatoro/4EGw]]

~
次のように全体を即実行関数として他のライブラリから見えなくするのが分かりやすくて良さそうです。（[[参考としたソース 改造 tmlib 数字ゲーム>http://jsdo.it/picowska/dFFv]]）
 (function TouchTheNumber() {
 	// screen 
 	var SCREEN_WIDTH    = 680;
 	var SCREEN_HEIGHT   = 960;
	...
	... tm.main()や各シーンの定義
	...
 })();




*アニメーションについて
**tm.app.Tweener
tm.app.Tweenerを用いると相対的な時間軸でアニメーションを積み重ねて表現できます。引数など詳しくはソースを見るのが良さそうです。
-[[ライブラリのtweener.jsソース>http://phi-jp.github.io/tmlib.js/docs/source/tweener.html#tm-app-Tweener]]
-[[Tweener sample - tmlib.js 0.1.7 | jsdo.it phi氏>http://jsdo.it/phi/wYnm]]



**tm.app.Timeline
tm.app.Timelineを用いると絶対的な時間軸でアニメーションを表現できます。引数など詳しくはソースを見るのが良さそうです。
-[[ライブラリのtimeline.jsソース>http://phi-jp.github.io/tmlib.js/docs/source/timeline.html#tm-app-Timeline]]
-[[tm.app.Timeline クラスサンプル | jsdo.it>http://jsdo.it/phi/wKEJ]]


***tm.app.Timelineの主なメソッド
-clear: それまでのアニメーションをクリア
-set: アニメーション無しで指定した値に設定
-to: 指定した値までアニメーション
-by: 足した値までアニメーション


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



**イージング
"easeOutExpo"といったアニメーションのかけ方です。
-[[tmlib.js docs tm.anim.easing>http://phi-jp.github.io/tmlib.js/docs/index.html#!/api/tm.anim.easing]]
-[[tween easing test - tmlib.js 0.1.4 | jsdo.it>http://jsdo.it/phi/6raX]]
-[[jQuery UI Easing一覧>http://frmmpgit.blog.fc2.com/blog-entry-16.html]] ... jQueryのイージング例です。グラフが分かりやすかったので紹介。



*スニペット
**メイン処理
 // 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/避けゲー(開始, 終了画面あり)]]に引用させていただいてます。オリジナルは[[こちら>http://jsdo.it/phi/2moF]]です。

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




*リンク
-[[tmlib.jsのサンプル>http://phi-jp.github.io/tmlib.js/test/app/?tests.benchmark.CrashScene]]
-[[tmlib.js API Documentation GitHub版>http://phi-jp.github.com/tmlib.js/docs/]]
-[[tmlib.js API Documentation TM Life版>http://tmlife.net/lib/tmlib/doc/index.html]]
-[[tmlib.js | GitHub>https://github.com/phi-jp/tmlib.js/]] ... ダウンロードリンクは古いかもしれません。tmlib.js最新版はbuildフォルダを確認してください。
-[[tmlib.js : オブジェクトを知っておく。 : typeOf 'aki_mana'>http://blog.livedoor.jp/aki_mana/archives/7337727.html]]
-[[tmlib.js / starter / main.js | GitHub>https://github.com/phi-jp/tmlib.js/blob/develop/starter/main.js]] ... tmlib.jsのシンプルなサンプル。tm.appを使った画面更新を含み、ためになるサンプルです。
-[[tmlib.js / plugins / fade.tm.js | GitHub>https://github.com/phi-jp/tmlib.js/blob/develop/plugins/fade.tm.js]] ... tmlib.jsと組み合わせると、フェードイン・フェードアウトが簡単に使えるプラグイン。お気に入り♪ ... このプラグインは本体に統合されたようです。
-[[phi氏のjsdo.it公開webアプリ>http://jsdo.it/phi]]
-[[TM Life tmlib.jsカテゴリ>http://tmlife.net/tag/tmlib-js]]
-[[JavaScript ライブラリ tmlib.js を使って10秒で遊べるゲームを作りました | TM Life>http://tmlife.net/programming/javascript/javascript-tmlib-js-10-play-game-create.html]] ... Enclose Circleゲームのソース。メニューとかフェード処理とかがかっこよくて参考となります。
-[[tmlib.js 怒濤の 100 サンプル!! &#8211; Graphics(HTML5 Canvas) 編 | TM Life>http://tmlife.net/programming/javascript/tmlib-js-dotou-100-sample-graphics-html5-canvas.html]]
-[[「tmlib.js 怒濤の 100 サンプル!!」を試す | 楽遊堂>http://rakuyudo.com/tag/tmlib-js/]]
-[[JavaScript弾幕ライブラリ>https://github.com/daishihmr/bulletml.js]]
-[[サンプルで作った☆避けゲーム+メニュー、ゲームオーバー画面>http://jsdo.it/phi/2moF]]
-[[サンプルで作った☆避けゲームをシューティングゲームに作り替えたコード>http://jsdo.it/alkaid_72th/jsQ3]]
-[[JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを作るチュートリアル | TEST CORDING>http://testcording.com/?p=1342]] ... ☆☆☆Sceneを使ったゲーム作成方法について詳しく解説されています。bgm, se再生方法や、ネームスペースの切り方、グローバル変数のファイルを分割したり大きいプログラムを設計する参考になります。
-[[tmlib.js入門用チュートリアル！避けゲーを作ってみよう | TEST CORDING>http://testcording.com/?p=1614]]
-[[パズルゲーム - tmlib.js 0.1.5 | phi氏>http://jsdo.it/phi/qwbs]]
-[[JavaScript ライブラリの tmlib.js を使って iPhone のゲームを Web に移植してみた | なんかもう実験的>http://craft-notes.com/iphone/cocos2d/tmlib-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-iphone-%E3%81%AE%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%92-web-%E3%81%AB%E7%A7%BB%E6%A4%8D%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/]] ... tmlib.jsの便利な点や概要について解説
-[[tmlib.jsでシューティングゲームを作るチュートリアル | なんかもう実験的>http://goo.gl/dIvPl]] ... tmlib.jsでのクラス定義方法、シーン利用方法、JSONでのラベル定義方法、ツイート方法など各種テクニック
-[[tmlib + box2dweb | jsdo.it v416氏 >http://jsdo.it/v416/8Nc4]] ... tmlib.jsとbox2dを組み合わせて物理シミュレーションしたサンプル
-[[マップチップ表示 + スプライトアニメーション - tmlib.js | jsdo.it>http://jsdo.it/omatoro/sVun]] ... 色々応用できそう
-[[tmlife-storage | phi氏>https://code.google.com/p/tmlife-storage/source/browse/trunk/gl-enchant-js/avoid9/lib/tmlib-js/tmlib.js?r=370]] ... JavaScriptの便利関数？
-[[JavaScriptライブラリ「tmlib.js」でローグライクを作ってみた | TEST CORDING>http://testcording.com/?p=1251]]
-[[JavaScript+canvasでiPhone風ピッカーを作ってみた | TEST CORDING>http://testcording.com/?p=1225]]
-[[tmlib.js 入門 スライドパズルが簡単にできちゃった | Nobuhide Tsuda氏>http://vivi.dyndns.org/tech/puzzle/SBP.html]] ☆☆
-[[canvasでiPhone風キーボード(見た目だけ) | jsdo.it phi氏>http://jsdo.it/omatoro/zp3A]] ... tmlib.jsでボックスの影を描画するときの参考となります
-[[マップチップ表示 + スプライトアニメーション | omatoro氏 jsdo.it>http://jsdo.it/omatoro/sVun]]
-[[tmlib.js - ドラッグ情報を取得できるよう拡張 | omatoro氏 jsdo.it>http://jsdo.it/omatoro/hNBP]]
-[[外部のSpriteSheetデータ(JSON)を読み込む - tmlib.js - 0.1.7 | jsdo.it phi氏>http://jsdo.it/phi/qXgX]]
-[[私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由 | TEST CORDING>http://testcording.com/?p=1433]]
-[[JavaScriptライブラリ「tmlib.js」で作ったローグライクゲームを改良してみた - RoguePlus | TEST CORDING>http://testcording.com/?p=1283]]
-[[手裏剣作ってみた - tmlib.js 0.1.6 | jsdo.it phi氏>http://jsdo.it/phi/5U94]] ... 手裏剣を投げる時のスワイプ操作で色々応用できそうです。
-[[tmlib.js ゲームプログラミングチュートリアル - 今流行のフラットデザインを使ったタッチゲームを作ろう | TM Life>http://tmlife.net/programming/javascript/tmlib-js-flat-design-game-tutorial.html]]
-[[Tweener sample - tmlib.js 0.1.7 | jsdo.it phi氏>http://jsdo.it/phi/wYnm]]
-[[爆発くん | jsdo.it>http://jsdo.it/daishi.hmr/scAh]] ... 画像(SpriteSheet)として保存できる。
-[[アヒルプカプカ - tmlib.js 0.1.7 | jsdo.it phi氏>http://jsdo.it/phi/p5x6]]
-[[tmlib.js examples - DOM Button | jsdo.it phi氏>http://jsdo.it/phi/7NZi]] ... tmlib.jsでcssを操作して、ボタンを作る方法
-[[Canvas  > globalCompositeOperation = "合成方法" | HTMLクイック リファレンス>http://www.htmq.com/canvas/globalCompositeOperation.shtml]] ... tmlib.jsでカラー合成方法を設定する時の参考となります。
-[[Label に shadow を付けてみる - tmlib.js - 0.2.0 | jsdo.it phi氏>http://jsdo.it/phi/ufgo]]
-[[tmlib備忘録>http://blz.x0.com/lab/tmlib/]] ... 0.2.x系のクラスなど記述方法まとめ
-[[Array(配列)を便利にする変数, メソッドたち | tmlife.io>http://tmlife.io/tmlib-js-array-extends/]]
-[[[tmlib.js]シーンまわりでよく使うイベント | Qiita>http://qiita.com/omatoro/items/ba2766042325e909ff30]]
-[[Heat Field - tmlib.js 0.3 - jsdo.it | Share JavaScript, HTML5 and CSS>http://jsdo.it/phi/66bm]]
-[[[tmlib.js]tmlib.jsでいい感じにaddChildしてみた | Qiita>http://qiita.com/omatoro/items/c2daacb2f57fe4ef6ed3]]