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

JavaScript/tmlib.js のバックアップソース(No.22)

次のイベントに参加して色々教えていただきました。~
[[【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)で保存すると、プレビューウィンドウで表示される

何がいいかというと、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



*スニペット
**メイン処理
 // 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://phi1618.github.io/tmlib.js/test/app/?tests.benchmark.CrashScene]]
-[[tmlib.js API Documentation GitHub版>http://phi1618.github.com/tmlib.js/docs/]]
-[[tmlib.js API Documentation TM Life版>http://tmlife.net/lib/tmlib/doc/index.html]]
-[[tmlib.js latest | jsdo.it>http://jsdo.it/phi/tmlib.js-latest]] ... tmlib.js 最新版のソース
-[[tmlib.js | GitHub>https://github.com/phi1618/tmlib.js/]]
-[[tmlib.js / starter / main.js | GitHub>https://github.com/phi1618/tmlib.js/blob/develop/starter/main.js]] ... tmlib.jsのシンプルなサンプル。tm.appを使った画面更新を含み、ためになるサンプルです。
-[[tmlib.js / plugins / fade.tm.js | GitHub>https://github.com/phi1618/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 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)として保存できる。