サンプル_boardとsprite - TouchDevelop / WindowsPhone7.5

boardとspriteのサンプル

概要

boardはフレームバッファのような役割をするメモリ上に作成される仮想画面です。
spriteはboardの上を自由に動き回ることのできる特殊な画像です。

小学校で使ったOHPをイメージするとわかりやすいかもしれません。

OHPの投影スクリーン	WindowsPhoneの画面
背景を描いた大きな透明シート	board
動かすキャラを描いた小さな透明シート	sprite

ここでは黄色いboardを表示してタップした場所にマゼンタのspriteを表示するというサンプルを作ってみます。
端末を振るとspriteが消えます。

spriteのset posで指定する座標の原点は左上ではなく中央です。

"//"で始まるコメント行は入力する必要ありません。

data

変数名	種別	初期値	説明
b	Board	-	board本体
p	Picture	-	spriteで使用する画像の入れ物
s	Sprite	-	sprite本体
ss	Sprite Set	-	spriteの集合体

今回はpは単純に塗り潰すだけですが、好きな画像を使用することもできます。

actions

初期化

• action main()
  • // 全画面サイズのboardを作成
  • data → b := media → create full board
  • // boardの背景色を黄色に設定
  • // ここでboardに絵を設定することもできますが今回は省略
  • data → b → set background(colors → yellow)
  • // sprite用に30x30サイズの画像を準備
  • data → p := media → create picture(30,30)
  • // 画像をマゼンタで塗り潰す
  • // 同じくここで絵を設定することもできますが今回は省略
  • data → p → fill rect(0,0,30,30,0,colors → magenta)
  • // 画像の入れ物をboardから作成してspriteに画像をセット
  • // コマンドはcreate pictureだけど実際に作成されるのはspriteオブジェクトです
  • data → s := data → b → create picture(data → p)
  • // boardに表示するsprite setを作成
  • data → ss := data → b → create sprite set
  • // sprite setに今回表示したいspriteを登録
  • // ここで複数のspriteを登録して同時に表示させることができます
  • var d := data → ss → add(s)
  • // boardを表示
  • data → b → post to wall

sprite表示処理

• action check_tap_pos()
  • // タップされた座標x
  • var x := data → b → touch current → x
  • // タップされた座標y
  • var y := data → b → touch current → y
  • // spriteを表示する座標(画面ではなくboard上の位置)を設定
  • data → s → set pos(x,y)
  • // spriteの描画を有効に設定
  • s → show
  • // boardにspriteを反映
  • data → b → evolve
  • // boardの表示を更新
  • data → b → update on wall

events

タップの判定

• event gameloop()
  • // タップされたか？
  • if data → b → touched then
    • // sprite表示ルーチンを呼び出し
    • code → check_tap_pos
  • else
    • // なにもしない

端末が振られた

• event shake()
  • // spriteの描画を無効に設定
  • s → hide
  • // boardにspriteを反映
  • data → b → evolve
  • // boardの表示を更新
  • data → b → update on wall