【講座?】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文などを使って観察しましたが、
アニメーションは呼び出しのたびに更新され、モーションは加算されるようでした。