0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【超初心者向け】『メイドイン「俺」』から学ぶゲーム作り③アニメーション編

Last updated at Posted at 2020-01-14

#はじめに
この記事は『メイドイン「俺」』から学ぶゲーム作り②台本(スクリプト)の書き方編
の続きです。
この記事は超初心者向けなのでアニメーションの作り方ではなく、アニメーションの構造について説明したいと思います。
#アニメーションについて

みなさんはパラパラ漫画を描いたことはありますか?
パラパラ漫画とは少し違った複数枚の絵を高速でめくることで実際動いてるように見せるものです。
IMG_9854.PNG

実はアニメーションとはそのパラパラ漫画のようなものなのです。
実際には動いていないけど、複数枚のイラストを交互に見せることによって動いてるように見えています。

ではこれが実際どのような感じなのか、例を追って見ていきましょう。

##(例)風船が浮いているように見せたい時

まず風船の画像を用意します。
IMG_9855.JPG

これだけだとただの風船ですよね。

####では少し位置の違った風船の画像二枚を用意します。
IMG_9857.JPG
IMG_9856.JPG

####この二枚を交互に表示すると、、

IMG_9858.GIF

こんな感じに!少しぎこちないですが画像の位置が変わっていないにも関わらずプカプカ浮いているように見えます。

このように、画像を重ねることで実際にその動きをしているように見せるのがアニメーションという機能です。
もしマリオに歩くアニメーションがなかったら、マリオがただ平行移動しているだけに見えます。

#動きを付け加えたい場合

例えばプカプカ浮いている風船に、割れるという動きを付け加えたいとします。
その場合、プカプカ浮いているアニメーションと、風船が割れるアニメーションの二つを用意しなければなりません。その場合

『もし風船に物が当たったら、プカプカのアニメーションから割れるアニメーションに移行する』という台本を書けば思い通りの動きになるかと思います。

マリオでも、『Aを押したらジャンプ』の動作になりますよね。この場合のアニメーションも
『Aを押したら、歩くアニメーションからジャンプのアニメーションに変更』という台本が実行されているわけですね!
IMG_9863.JPG

#終わりに
アニメーション編いかがでしたでしょうか?
次回は何を書こうか悩み中です、、

**『メイドイン「俺」』**についてのサイトはこちらから。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?