スクリプト/拡張画像操作機能の使い方
最終投稿者: dycoon
更新:2010/04/28 20:03:50
拡張画像操作機能の使用例
ちらつきのない画像表示を実現するために
拡張画像操作機能というものを追加しました。
動作しているものは以下で見ることができます。
拡張画像操作機能テストゲーム
まずは、ただ画像を表示しているスクリプトを見てみます。
case speakWithSelect(2,"はい","いいえ", "単純な画像表示をおこないますか?") when 0 # textID = createText(10, 20, 400, 32) setText(textID, "キーeを押すかマウスクリックで終了") # setCanvasVisible(true) drawCanvas() s = createSprite(45) setSpriteRect(s, 0 + 0.5, 0 + 0.5, 146 - 1.0, 302 - 1.0, -146 / 2, -302 / 2, 146, 302 ) setSpritePosition(s, 512 / 2, 384 / 2) setSpriteRotation(s, 0) setSpriteScale(s, 1.0, 1.0) setSpriteZOrder(s, 5) # startInput() loop = true while loop while hasInput() takeInput() if isKeyUp("E") || isMouseDown() loop = false end end # 描画 drawCanvas() # waitTime(1) end endInput() deleteAllSprite() setCanvasVisible(false) deleteTextAll() when 1 end
この機能では描画出力内容を画像に保存して表示します。
保存しているところをキャンバスと呼び、以下のコードでキャンバスを表示しています。
setCanvasVisible(true)
キャンバスの上には画像の一部を変形などさせてコピーしたものをおくことができます。
これをスプライトと呼びます。
スプライトは以下のようにして作ります。
s = createSprite(45)
第1引数の45は画像IDです。
スプライト画像のコピー元とコピー先は以下のように指定します。
setSpriteRect(s, 0 + 0.5, 0 + 0.5, 146 - 1.0, 302 - 1.0, -146 / 2, -302 / 2, 146, 302 )
最初の引数sはスプライトを表わすIDです。
その次の4つの引数はコピー元の矩形を表わしています。
それぞれ左上のx,y座標と矩形の幅と高さです。
最後の4つの引数はコピー先の矩形を表わしています。
内訳はコピー元と同様です。
次の関数でスプライトの位置、回転量、拡大率、zオーダーを指定しています。
setSpritePosition(s, 512 / 2, 384 / 2) setSpriteRotation(s, 0) setSpriteScale(s, 1.0, 1.0) setSpriteZOrder(s, 5)
drawCanvas関数でキャンバス上のスプライトをキャンバスに描画します。
drawCanvas()
setCanvasVisibleの直後に呼んでいるものは、
キャンバスに以前の描画内容が残っていることがあるため
それを削除するために呼んでいます。
イベントが終わってもスプライトは保存されるため、
ここではすべてのスプライトを削除しています。
deleteAllSprite()
以下のようにして、キャンバスの表示をしないようにしています。
setCanvasVisible(false)
回転させる例
case speakWithSelect(2,"はい","いいえ", "回転する画像表示をおこないますか?") when 0 # textID = createText(10, 20, 400, 32) setText(textID, "キーeを押すかマウスクリックで終了") # setCanvasVisible(true) drawCanvas() s = createSprite(45) setSpriteRect(s, 0 + 0.5, 0 + 0.5, 146 - 1.0, 302 - 1.0, -146 / 2, -302 / 2, 146, 302 ) theta = pi() / 2.0 setSpritePosition(s, 512 / 2, 384 / 2) setSpriteRotation(s, theta) setSpriteScale(s, 1.0, 1.0) setSpriteZOrder(s, 5) # startInput() loop = true while loop while hasInput() takeInput() if isKeyUp("E") || isMouseDown() loop = false end end #動き theta = theta + pi() / 180 setSpriteRotation(s, theta) # 描画 drawCanvas() # waitTime(1) end endInput() deleteAllSprite() setCanvasVisible(false) deleteTextAll() when 1 end
以下でスプライトに回転を加えています。
#動き theta = theta + pi() / 180 setSpriteRotation(s, theta)
移動させる例
case speakWithSelect(2,"はい","いいえ", "移動する画像表示をおこないますか?") when 0 # textID = createText(10, 20, 400, 32) setText(textID, "キーeを押すかマウスクリックで終了") # setCanvasVisible(true) drawCanvas() s = createSprite(45) setSpriteRect(s, 0 + 0.5, 0 + 0.5, 146 - 1.0, 302 - 1.0, -146 / 2, -302 / 2, 146, 302 ) x = 512 / 2 y = 384 / 2 d = 1 setSpritePosition(s, x, y) setSpriteRotation(s, 0.0) setSpriteScale(s, 1.0, 1.0) setSpriteZOrder(s, 5) # startInput() loop = true while loop while hasInput() takeInput() if isKeyUp("E") || isMouseDown() loop = false end end #動き if y > 384 / 2 + 40 d = -1 elsif y < 384 / 2 - 40 d = 1 end y = y + d setSpritePosition(s, x, y) # 描画 drawCanvas() # waitTime(1) end endInput() deleteAllSprite() setCanvasVisible(false) deleteTextAll() when 1 end
以下でスプライトの位置を動かしています。
#動き if y > 384 / 2 + 40 d = -1 elsif y < 384 / 2 - 40 d = 1 end y = y + d setSpritePosition(s, x, y)
拡大縮小させる例
case speakWithSelect(2,"はい","いいえ", "拡大縮小する画像表示をおこないますか?") when 0 # textID = createText(10, 20, 400, 32) setText(textID, "キーeを押すかマウスクリックで終了") # setCanvasVisible(true) drawCanvas() s = createSprite(45) setSpriteRect(s, 0 + 0.5, 0 + 0.5, 146 - 1.0, 302 - 1.0, -146 / 2, -302 / 2, 146, 302 ) t = 0.0 setSpritePosition(s, 512 / 2, 384 / 2) setSpriteRotation(s, 0.0) sc = sin(t) * 0.5 + 1.0 setSpriteScale(s, sc, sc) setSpriteZOrder(s, 5) # startInput() loop = true while loop while hasInput() takeInput() if isKeyUp("E") || isMouseDown() loop = false end end #動き t = t + 0.05 sc = sin(t) * 0.5 + 1.0 setSpriteScale(s, sc, sc) # 描画 drawCanvas() # waitTime(1) end endInput() deleteAllSprite() setCanvasVisible(false) deleteTextAll() when 1 end
以下でスプライトを拡大縮小させています。
#動き t = t + 0.05 sc = sin(t) * 0.5 + 1.0 setSpriteScale(s, sc, sc)
たくさん表示させる例
case speakWithSelect(2,"はい","いいえ", "たくさん(64個)画像表示をおこないますか?") when 0 # textID = createText(10, 20, 400, 32) setText(textID, "キーeを押すかマウスクリックで終了") # setCanvasVisible(true) a = createArray() count = 64 t = 0.0 i = 0 while i < count s = createSprite(23271) setSpriteRect(s, 0 + 0.5, 0 + 0.5, 32 - 1.0, 32 - 1.0, -16, -16, 32, 32 ) setSpritePosition(s, 512 / 2, 384 / 2) setSpriteRotation(s, 0.0) setSpriteScale(s, 1.0, 1.0) setSpriteZOrder(s, 5) pushArray(a, s) i = i + 1 end # startInput() loop = true while loop while hasInput() takeInput() if isKeyUp("E") || isMouseDown() loop = false end end #動き t = t + 0.05 i = 0 while i < count s = a[i] x = i * 4 + 16 y = sin(t + i * 0.1) * 64 + 1.0 + 384 / 2 setSpritePosition(s, x, y) i = i + 1 end # 描画 drawCanvas() # waitTime(1) end endInput() deleteAllSprite() setCanvasVisible(false) deleteTextAll() when 1 end
コメントする
コメントするには、ログインする必要があります。
コメント一覧
コメントはありません。