2022/08/17
こんにちは。影織です。
今回は、私の切り絵アニメーション制作の裏側と、
作ったアニメーションをどんな風にゲーム内で動かそうか、というお話です。切り絵アニメーションの制作過程
私の作業過程はこんな感じです。
- 切り絵をする（数時間〜1日/1キャラ※）
※色紙を貼って乾かしている間、同時並行で3キャラくらい同時に作っています。- スキャナで取り込む
- スキャン画像から手足などのパーツ分け素材を作る（1時間/1キャラ）
- Live2Dに取り込んでボーンをつける（30-40分/1キャラ）
- アニメーションをつける（20分/1アニメーション）
パーツ分け作業風景はこんな感じです。
パーツごとに切り絵を作るのではなく、一枚の切り絵を作って、
このように後からパーツ分けしていくんですね。ちなみにこの子が主人公です。名前はペパ。どうぞお見知り置きを。
キャラクターをブラウザでどう動かすか
キャラクターの動かし方とイベントのトリガー
弓削田さんからは、動くキャラクターオブジェクトCSSデータをJavaScriptで読み込んで、
キー切り替えで歩かせることができるようにして、
マップ上にコリジョン設定（当たり判定、どこを歩けるかという座標の制限）をつけたら良いのでは、
というアイデアが出ました。この場合のイベントは、キャラクターが一定範囲にいる場合にスペースキーを押したり、
クリックすることで発生させる、と言う形になります。私は、ユーザーが指定の場所をクリックしたら、
キャラクターがそこまで自動で動くようにする、
というアイデアを出しました。自動で動くスタイルならば、キー入力のことを考えなくて済むので、実装自体はシンプルになりますが、
物語の没入感を考えると、ユーザーがキャラクターを操作できる方がいい気もします。
うーむ、悩ましいなぁ。インターフェースと操作性
ユーザーの使いやすさ的にも、キーボード操作・マウス操作・スマホのタッチ操作という
3種類を分離して実装することが大事そうです。操作はストーリーと合わせて考えていく必要があるので、この後素材が揃ってきた段階で、さらに詰めていきます。
どのインターフェースを使っても操作しやすい状態を目指したいですね。
