高度なオブジェクトの移動(回転とか)

このエントリーをはてなブックマークに追加




 描画オブジェクトの移動方法についてです。今回は少し手の込んだ移動(回転など)を行いたい場合の方法です。


基本的な考え方は「オブジェクトの移動」と同様です。
キャンセル・一時停止・再開はこちらを参照してください。
移動関係の各種イベントはこちらを参照してください。


1.関数の説明

 リファレンスを見ると関数と引数は以下の通りです。

transition.to(target, params):現在描画している位置から引数で指定した位置へ移動
transition.from(target, params):引数で指定した位置から現在描画している位置へ移動


引数名 説明
target 移動させる対象
params パラメータ

パラメータ
注:パラメータはすべてオプションなので、設定しなくても動作します。

名前 説明
プロパティ 描画オブジェクトのプロパティ
time 移動が完了するまでの時間(ミリ秒)
iterations 繰り返し回数
tag 識別用の名前(キャンセルや一時停止などで使用可能)
transition 移動の仕方(なだらかに加速など)(easingライブラリを指定)
delay 指定時間後に移動を開始(ミリ秒)
delta よくわかりません・・・が、動きの違いは
座標の原点を今ある位置とするか、絶対座標系の原点にするか、といった感じです
onStart 移動が開始した際に呼び出す関数を指定
onComplete 移動が完了した際に呼び出す関数を指定
onPause 移動が一時停止した際に呼び出す関数を指定
onResume 移動が再開した際に呼び出す関数を指定
onCancel 移動をキャンセルした際に呼び出す関数を指定
onRepeat 移動が完了し繰り返し実行する際に呼び出す関数を指定


2. オブジェクトのプロパティを利用

 transition.to()およびtransition.from()の場合、描画オブジェクトのプロパティを利用することができます。基本的な使い方は「オブジェクトの移動」と同様です。


2.1 回転

 描画オブジェクトにある「rotation」を使用すると移動時に、回転を同時に行うことができます。以下のプログラムを実行すると、(100, 100)に描画されている赤い四角形が、(200, 200)へ180度回転しながら移動します。

local obj1 = display.newRect(100, 100, 30, 30)
obj1:setFillColor(1, 0, 0, 1)

local transitionTable = {
    x = 200,
    y = 200,
    rotation = 180,
    time = 1000,
}
local retTransition = transition.to(obj1, transitionTable)


2.2 透明にする

 描画オブジェクトにある「alpha」を使用すると移動時に、透過度の変更を同時に行うことができます。以下のプログラムを実行すると、(100, 100)に描画されている赤い四角形が、(200, 200)へ透明になりながら移動します。

local obj1 = display.newRect(100, 100, 30, 30)
obj1:setFillColor(1, 0, 0, 1)

local transitionTable = {
    x = 200,
    y = 200,
    alpha = 0,
    time = 1000,
}
local retTransition = transition.to(obj1, transitionTable)

 回転する場合、アンカーポイントをどこに設定しているかにより、回転の仕方が変わるので注意してください。


2.3 その他

 他にもサイズを変更など様々なことができます。色々と試して確認してみてください。




       



<更新履歴>

更新日 Corona SDKのバージョン
新規作成 2015年9月11日 v2015.2646






前へ          メニューへ          次へ



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)