今回から流れる(自動スクロール)する背景、というのを作ってみたいと思う。 まず ASSETS に BACK という画像を登録しよう。 画像の大きさは画面に合わせる(SCREEN_WIDTHとSCREEN_HEIGH、つまり横640 * 縦480) (道路の背景を描いてみた。) 背景表示といっても…

前回までで、スピードやタイムのスコアを作った。 それぞれやりたいように…例えばボタンを押したらスピードの数値が上がるようとか、毎回タイムを減らすとか、処理を書こう。 例えばキーでスピード上昇なら… var key = app.keyboard; if (key.getKey("z")) {…

デフォルトから一本のゲームを完成させる３.オブジェクトをreturnで返す。 - tmlibの練習ブログで作ったmakeLableはグローバル関数という事で、どこからでも呼び出せてしまう。 変数にvarを付けるのと同じで、使える範囲は狭いほど、余計な事を考えなくて済…

tmlibは"クラス"の概念を導入している。 [Documents]で検索すると出てくる項目、tm.app.Object2D tm.display.Labelだとかは、全て"クラス"である。 今までも少しずつ触れてきた、クラスとオブジェクトの違いは何か? デフォルトから一本のゲームを完成させる…

前回はtm.app.Label( );といった宣言部を毎回繰り返していてしつこい、という事だった。 ではそこも、グローバルな関数内に入れてみよう。 すると、こう変わる。 function makeLabel(l_obj){ var label = tm.app.Label(); // 関数内でラベル作成 label.posit…

前回ではオブジェクトを作り、ラベルの設定に使った。 だが今いち、ダラダラとして長い。そこを短くしていく。 一番下…、tm.define("MainScene", { }のカッコよりも更に下に、こういった関数を定義しよう。 function setLabel(that , l_obj){ that.position.…

今回から本腰を入れて一つ、ちょっとしたゲームと呼べるものを完成させたい。 以後、開発を楽にするための色々な技術を取り込んでいくけど、全部すぐに覚えたり理解しなければいけない、という訳ではない。 基本的には今までのやり方でも出来る。 ただ、それ…

main.jsに書いたコードが長くなり、行数が増えると今いじりたい箇所も探しづらくなる。 色々なアプローチはあるだろうけど、ここでは"外部ファイル"にしてみようと思う。 例えば、設定ファイルが書かれた部分… 前回のコードだと、 /* * constant */ と書かれ…

前回の続き。変数のスコープの関係上、関数内で使われた数値を外に持ち出すためには、一工夫がいる。 (もちろんグローバル変数を使っても持ち出せるが、関数のたび作っていては不便) returnというものが用意されている。 具体的には this.star.scale_sp_widt…

前回では関数の引数を知った。 [Documents]で見ると分かるように、tmlibに用意されたクラスにはたくさんの関数が、要素として登録されている。 そしてそこに、新しく関数を作る事もできる。 と言っても難しい話ではない。既存のクラスに新しく変数を作って、…

前回に続き、関数の発展的な事を学ぶ。 関数には、引数(ひきすう)というものを渡せる。 aaa = function(mozi){alert(mozi);} // #引数をmoziとして受けとる。 aaa("アラートだよ"); // #引数を渡す 関数の実行を表わす( )の中に、渡したいデータを書く(変数…

前回では、キャラの拡大を反映した当たり判定を書いた。 だがいまいちスマートではなく、もっと短くできないだろうか…と。 その為にまず、"関数"というものを理解する必要がある。 関数とは、functionが頭に付き、{ }の間に、行う処理をずらっと書いたモノ。…

前回、Ｚキーで拡大、当たり判定の処理…と作ってきて、一つ気になる事ができた。 "いくら拡大しても、当たり判定は変化しない"のだ。 試しに、 if (key.getKey("c")) { alert(this.star.width);} という形でチェックしてみても、拡大前と拡大後で、width=横…

変数には、スコープというものが存在する。 これはその変数が、どこを過ぎるまで保存するか(どこを過ぎたら消去されるか)といったルール付けだ。 例えば、 var key = app.keyboard;userData = tm.util.DataManager.get("userData");これらで、疑問を抱かなか…

前回までで、当たり判定により消滅するようになった。 そこで今度は、.enemyを消した時に"ドカ"という効果音を鳴らすようにしたい。 http://testcording.com/?p=1367 このサイトが詳しいけど、要は tm.preload(function() { tm.sound.SoundManager.add("hit_…

前回、console.logで当たり判定を確かめたところを、一気にゲームぽくしよう。 まず、[Documents]でStarShapeの項目を探すと、"消滅フラグ"―visibleというのを見つけられる。 これを使えば"ヒットした時に消滅"という事も簡単にできる。 …しかしここでちょっ…

前回から更にゲームぽく、"当たり判定"の処理を追加してみようと思う。 細かく複雑に動き回る敵を…と夢が膨らみがちだけど、まず最小限、".starが何かに触れた時に、alertを出す"からやるのが現実的だ。 単純に考えて、.starと同じ感じで、addChildで付け加…

今回は前回で追加したTitleSceneに、タイトル画像とマウスではなくキーで進む、という改造をしてみる。 まずはタイトル画像から。 他にTitleSceneを説明してるサイトも余り見つからない…ので、前々回と同じくTitleSceneの、tmlibの元のソースコードを確認し…

今回はゲームに付きものの、"タイトル画面"を設けたいと思う。 前回でシーンというもの(の内側)を意識した。 タイトル画面は"TitleScene"として、ある程度の処理が既に用意されている。それを使うのだ。 http://testcording.com/?p=1748 …と言っても、このサ…

デフォルトのmain.jsをいじる３,画像を読み込んでみる。 - tmlibの練習ブログで"なんでシーンなんて面倒臭い区切りをするのか"、"なぜLoadingScene"＋ASSETSでないと画像を表示できないのか? と疑問に思わなかっただろうか。 試しにASSETSを直接読み込んでみ…

デフォルトのmain.jsをいじる１,キー入力可能に - tmlibの練習ブログでは確認の方法として、alert("aaa")と書いた。 これでももちろん、用を足しているのだが、例えばループや毎フレーム実行される所に置くと (初期のmain.jsならupdate: function(app) {…}内…

JavaScript(tmlibもベースはこれ)でエラーが出た時、ただ止まるだけで、どこでエラーが出たのか、分かりにくい。 そんな時はfirefoxならfirebug、 GoogleChormeならGoogle Chrome Developer Tools… safariなら{開発}でエラーコンソール、 と、各ブラウザでそ…

前回：デフォルトのmain.jsをいじる２,拡大縮小のプロパティ(要素)を探す - tmlibの練習ブログ まででキー受付で、アクションを起こせるようになった。 ここまで来たら、いつまでも星のままでは寂しい。 自分で作った色々な画像を使ってみたい。 という訳で…

前回：デフォルトのmain.jsをいじる１,キー入力可能に - tmlibの練習ブログ までで、キー入力は可能になった。しかし拡大縮小を行うにはどうすればいいのだろう。 main.jsをよく観察してみると、星を回転させているとおぼしき所は // クリック or タッチ中は…

まず公式(http://phi-jp.github.io/tmlib.js/)から落として、 index.htmlをテキストエディターで開くと <script src="lib/tmlib.js"></script> <script src="http://dat-gui.googlecode.com/git/build/dat.gui.js"></script> <script src="https://raw.github.com/mrdoob/stats.js/master/src/Stats.js"></script> <script src="main.js"></script> と…