スクリプト/拡張画像操作機能の使い方(履歴ID：35)
最終投稿者：
dycoon
更新：2010/04/28 20:03:50
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