デフォルトのmain.jsをいじる２,拡大縮小のプロパティ(要素)を探す
前回：デフォルトのmain.jsをいじる１,キー入力可能に - tmlibの練習ブログ
までで、キー入力は可能になった。
しかし拡大縮小を行うにはどうすればいいのだろう。
main.jsをよく観察してみると、星を回転させているとおぼしき所は
// クリック or タッチ中は回転させる (略) this.star.rotation += 15;
また星を移動させている所だと
// マウス位置 or タッチ位置に移動 this.star.x = p.x; this.star.y = p.y;
こんな感じ。
つまり
this.star.大きさ = 数値(何倍か?)
みたいな形になるのではないか、と頭が働く。
こういったその物体(ここではstar)が持つ要素を操作すると、それに応じた変化があるみたいだ。
角度はrotationで、座標はxやy。
では"大きさ"の要素名はなんだろう?
(「tmlib 拡大」とかでGoogle検索しても、今の所は出てこない)
こういう時は、公式に要素一覧が載っているので、それを見てみる。
http://phi-jp.github.io/tmlib.js/
ページを開き、[Documents >>]をクリック。
さて小難しげな画面が出てきたけども、調べたい一点だけ調べよう。
今回調べたいのはずばり、this.star がどんな要素を持っているか、だった。
this.star自体は変数であって、何でも入れられる。
何が入っているか、その"正体"が肝心。
そこでmain.jsの、this.starへ代入を行っている箇所を探してみる。
// 星スプライト this.star = tm.app.StarShape(64, 64);
どうやらthis.starには tm.app.StarShape(64, 64) というのを入れてるみたい。
これは"tmの中にある、appの中にある、StarShape"という意味。
(tmはtmlib、appはapplicationの略かな?)
この場合、tmもappも経路で、最終的に辿り着いてるのはStarShapeということに。
検索窓にStarShapeと入力してみよう。候補が一つ出てくるだろうから、そこに飛ぶ。
>簡単に星形を描画できるクラス
と書いてある、どうやらこれで間違いなさそうだ。
その下の[Properties]という項目をざっと眺めてみる。
色々難しそうな単語が並んでいるが、"x"や"rotation"という知っている単語が、たまにある。
ここに要素が網羅されていそうだ。
さて(現時点で)rotationの下にある、"scaleX","scaleY"というのが知りたかった拡大率の要素名である。
(説明にはスケール、とだけしか書いてないが…)
試してみよう。
前回で、alertで動くか確認した部分
if (key.getKey("z")) {alert("aaa");}を
if (key.getKey("z")) {
this.star.scaleX += 0.1
}こう変えてから、index.htmlを再読み込み。
すると…Ｚキーで星が横に伸びるようになる!
ちなみにscaleYにも足してあげればバランス良く拡大できるし、+= 0.1を -= 0.1 に変えれば縮小にもなる。
Ｚキーで拡大縮小ができるようになった。
ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_07.txt
＊バージョンは、tmlib.js 0.2.0で作成。
