【講座？】CoRを触ってみる07～アニメーション編～【自分用メモ？】
投稿者：
光楼（114）
投稿日：2017/02/18 15:51
【講座？】CoRを触ってみる06～スプライト編～【自分用メモ？】←前回
L(“”m“”)」
#このブログの情報は2017年2月18日現在のものです。今後変更になる可能性があります。
そもそもアニメーションとは？
複数の静止画を使って動きを作ることです。
RmakeでもRPGのキャラクタを作るときに歩行アニメーションを設定したと思います。
今回は前回の背景画像をアニメーションさせたいと思います。
どうアニメーションさせるかって？
こんな感じでゆっくり色が変化するようにしようと思ってます。
さて、また例のテンプレから初めて行きましょう。
変数定義
名前を変えますが前回同様、変数を定義します。
素材読込み
さて次は画像を読み込みます。
1コマあたり225x400のサイズで計11コマ分の画像です。
なぜ450x800にしなかったかって？
容量オーバーだよ！
3MB超えちゃったんです。だから半分にしました。
だから使うときは2倍にします。
さて今まで通りpreload内に書きますよ。
さて、今回はこれだけじゃない。
アニメの設定をしてやります。
id: 318428の後ろに書き足します。
まずはframe_size。1コマの画像サイズですね。
さっきも言ったように225x400なので以下のように書きます。
そしてid: 318428の画像に含まれるコマ数です。11コマなので……
と指定してあげます。
完成形↓
アニメーション定義
さて次は定義をしていきます。
前回同様start_sceneよりも下に書きます。
これだけではアニメーションの定義がされていません。
originの後に書きましょう。
なんですか、これ？
解説しましょう！
'normal'
アニメーションの名前です。アニメーションを開始するときに必要です。
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
アニメーションの再生順を指定しています。
あの一枚絵には11コマ分の画像が並んでいるので、読込んだ時に左から順に0～10の番号が割り振られています。
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]は一番左のコマから一番右のコマまで行った後、1つまり2番目のコマまで戻って来る事になります。
20
なんのすうじ！なんのすうじ！
アニメーションの間隔です。
次のコマを表示するのに何フレーム待つかって事です。
CoRは確か60フレームで1秒だった気がします。
今回は1/3秒間隔、つまり20に設定しました。
true
これはアニメーションをループさせるかの設定です。
ループさせるのでtrueにしています。
定義は以上。
表示・再生
前回説明したとこはすっ飛ばしていくよー！
create内に書いていくよー！
scale
scaleって？
倍率だよ！
横・縦方向に何倍拡大・縮小するかを指定しています。
今回はどちらも2倍です。
frame_index
すみません！前回の説明間違ってました！
コマ数を決めるためのものとか言ってましたが、
実際は表示するフレームを指定するものでした。
一番最初のコマを表示させたいので0にして下さい。
さて、これだけではアニメーションは再生されません。開始する処理が必要です。
これをendの下に書いてください。
因みにbg_spriteは変数、'normal'は定義で付けた名前です。
これで完成！
次回→【講座？】CoRを触ってみる08～テキストスプライト編～【自分用メモ？】
ツイート
L(“”m“”)」
#このブログの情報は2017年2月18日現在のものです。今後変更になる可能性があります。
そもそもアニメーションとは？
複数の静止画を使って動きを作ることです。
RmakeでもRPGのキャラクタを作るときに歩行アニメーションを設定したと思います。
今回は前回の背景画像をアニメーションさせたいと思います。
どうアニメーションさせるかって？
こんな感じでゆっくり色が変化するようにしようと思ってます。
さて、また例のテンプレから初めて行きましょう。
scene 'start' do #シーンstart #変数定義 preload do #素材読込み end create do #シーン初期化 end update do #メインループ end render do #描画 end end #シーンスタート start_scene "start"
変数定義
名前を変えますが前回同様、変数を定義します。
bg_sprite = nil
素材読込み
さて次は画像を読み込みます。
1コマあたり225x400のサイズで計11コマ分の画像です。
なぜ450x800にしなかったかって？
容量オーバーだよ！
3MB超えちゃったんです。だから半分にしました。
だから使うときは2倍にします。
さて今まで通りpreload内に書きますよ。
image 'アニメ背景', id: 318428
さて、今回はこれだけじゃない。
アニメの設定をしてやります。
id: 318428の後ろに書き足します。
まずはframe_size。1コマの画像サイズですね。
さっきも言ったように225x400なので以下のように書きます。
frame_size: [225, 400]
そしてid: 318428の画像に含まれるコマ数です。11コマなので……
frame_pattern: 11
と指定してあげます。
完成形↓
image 'アニメ背景', id: 318428, frame_size: [225, 400], frame_pattern: 11
アニメーション定義
さて次は定義をしていきます。
前回同様start_sceneよりも下に書きます。
sprite '背景' do image 'アニメ背景' origin :left_top end
これだけではアニメーションの定義がされていません。
originの後に書きましょう。
animation 'normal', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 20, true
なんですか、これ？
解説しましょう！
'normal'
アニメーションの名前です。アニメーションを開始するときに必要です。
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
アニメーションの再生順を指定しています。
あの一枚絵には11コマ分の画像が並んでいるので、読込んだ時に左から順に0～10の番号が割り振られています。
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]は一番左のコマから一番右のコマまで行った後、1つまり2番目のコマまで戻って来る事になります。
20
なんのすうじ！なんのすうじ！
アニメーションの間隔です。
次のコマを表示するのに何フレーム待つかって事です。
CoRは確か60フレームで1秒だった気がします。
今回は1/3秒間隔、つまり20に設定しました。
true
これはアニメーションをループさせるかの設定です。
ループさせるのでtrueにしています。
定義は以上。
sprite '背景' do image 'アニメ背景' origin :left_top animation 'normal', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 20, true end
表示・再生
前回説明したとこはすっ飛ばしていくよー！
create内に書いていくよー！
bg_sprite = put_sprite '背景' do position 0, 0 scale 2.0, 2.0 frame_index 0 end
scale
scaleって？
倍率だよ！
横・縦方向に何倍拡大・縮小するかを指定しています。
今回はどちらも2倍です。
frame_index
すみません！前回の説明間違ってました！
コマ数を決めるためのものとか言ってましたが、
実際は表示するフレームを指定するものでした。
一番最初のコマを表示させたいので0にして下さい。
さて、これだけではアニメーションは再生されません。開始する処理が必要です。
bg_sprite.start_animation('normal')
これをendの下に書いてください。
因みにbg_spriteは変数、'normal'は定義で付けた名前です。
これで完成！
scene 'start' do #シーンstart
#変数定義
bg_sprite = nil
preload do #素材読込み
image 'アニメ背景', id: 318428, frame_size: [225, 400], frame_pattern: 11
end
create do #シーン初期化
bg_sprite = put_sprite '背景' do
position 0, 0
scale 2.0, 2.0
frame_index 0
end
bg_sprite.start_animation('normal')
end
update do #メインループ
end
render do #描画
end
end
#シーンスタート
start_scene "start"
sprite '背景' do
image 'アニメ背景'
origin :left_top
animation 'normal', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 20, true
end
次回→【講座？】CoRを触ってみる08～テキストスプライト編～【自分用メモ？】
コメントする
コメントするには、ログインする必要があります。
解説ありがとうございます(^^)
シーン初期化の中に定義し終えた後アニメーションの開始の命令を書くということだけど、
render内やupdate内に書くのとはどう違うのだろう…
updateやrenderはループなので、アニメーションが何度も最初からやり直される事になると思います。
if文とかを使えば好きなタイミングで開始出来るんじゃないかと。
ちょっとやってみましたがそんな感じのようです。
create内に書かないと、最初がちょっと固まってしまってました。
update内でif文などを使って観察しましたが、
アニメーションは呼び出しのたびに更新され、モーションは加算されるようでした。