【講座?】CoRを触ってみる07~アニメーション編~【自分用メモ?】

投稿者:Material 185033 3 mini 光楼(114) 投稿日:2017/02/18 15:51

【講座?】CoRを触ってみる06~スプライト編~【自分用メモ?】←前回

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~テキストスプライト編~【自分用メモ?】

コメントする

コメントするには、ログインする必要があります。

コメント一覧

            mini mosmoss(投稿日:2017/02/18 17:58, 履歴)
パッと見た感じ、圧倒的に楽!!で使いやすそう
解説ありがとうございます(^^)
            mini mosmoss(投稿日:2017/04/22 17:43, 履歴)
アニメーション定義のスクリプトの書き方が直感的でわかりやすい
シーン初期化の中に定義し終えた後アニメーションの開始の命令を書くということだけど、
render内やupdate内に書くのとはどう違うのだろう…
Material 185033 3 mini 光楼(114)(投稿日:2017/04/23 15:17, 履歴)
以下全て予想です。
updateやrenderはループなので、アニメーションが何度も最初からやり直される事になると思います。
if文とかを使えば好きなタイミングで開始出来るんじゃないかと。
            mini mosmoss(投稿日:2017/04/23 18:56, 履歴)
ありがとうございます!
ちょっとやってみましたがそんな感じのようです。
create内に書かないと、最初がちょっと固まってしまってました。
update内でif文などを使って観察しましたが、
アニメーションは呼び出しのたびに更新され、モーションは加算されるようでした。