スクリプト/拡張画像操作機能の使い方(履歴ID:35)

最終投稿者:Zararu128x128 mini 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