この講座で学ぶこと
- 動かしやすいキャラクターを設計する
- キーポーズを決める
- 4コマの歩行サイクルを作る
- FPSで動く速さを調整する
PixambasのPixel Studioと新しいブラウザー。アカウント登録は不要です。
入門コースで学んだ内容を、Pixambasでの実際の制作課題を通して発展させます。 Pixel Studioを開く →
学習の進捗
このブラウザーに進捗が保存されます。
動かしやすいキャラクターを設計する
まず32×32ピクセルの簡単なキャラクターを作ります。腕や足が動く余白を残し、正面か横向きかを決めます。床の位置とキャラクターの高さを基準にしてください。
手順
- 透明背景の32×32プロジェクトと下描きレイヤーを作る。
- 4～5色で頭・胴体・手足を描く。
- 床の基準線と中心、高さを記録する。
具体例
足の位置を同じ行にそろえると、コマ間の不自然な浮きを防げます。
練習課題
等倍で読めるキャラクターを作り、プロジェクトを保存する。
注意点: 注意：シルエットを確認する前に細部を描き込みすぎないこと。
キーポーズを決める
動きを分かりやすくするには、接地するポーズと足が通過するポーズから始めます。手足の位置を交互に変え、小さい画像でも動作が読めるようにします。
手順
- 最初のコマを複製して接地ポーズを作る。
- さらに複製し、前に出す足と腕を入れ替える。
- 2つのポーズを交互に見てシルエットを調整する。
具体例
横歩きでは前に出る足と反対側の腕を前に動かせます。
練習課題
再生しなくても区別できる2つのポーズを完成させる。
注意点: 注意：胴体を全く動かさず足先だけを動かさないこと。
4コマの歩行サイクルを作る
基本形は「接地A→通過A→接地B→通過B」です。唯一の正解ではありませんが、最初の練習に向いています。体の比率と足の接地点がぶれないようにします。
手順
- 4つのコマを基本の順番に並べる。
- オニオンスキンで頭・腰・足の位置を比べる。
- 拡大表示と等倍でループ再生して確認する。
具体例
通過ポーズで頭を1ピクセル上げると小さな弾みが生まれます。
練習課題
4コマの歩行を完成させ、改善点をひとつ記録する。
注意点: 注意：理由なくキャラクターの高さを毎コマ変えないこと。
FPSで動く速さを調整する
FPSは1秒あたりのコマ数です。4コマを8 FPSで再生すると、1周は0.5秒です。絵を描き直さなくても動きの速さを変えられます。
手順
- 4、8、12 FPSを順番に試す。
- 各設定で複数回ループを観察する。
- 最も見やすい速度を選ぶ。
具体例
4コマで8 FPSは0.5秒のループです。絶対的なルールではありません。
練習課題
選んだ再生速度の理由を説明する。
注意点: 注意：速度の問題をコマ数を増やすだけで解決しようとしないこと。
待機動作と小さな動きを追加する
待機中の動作は呼吸、まばたき、服の揺れなど少しの変化で十分です。大きな動きと小さな動きを区別すると見やすくなります。
手順
- 元のキャラクターをバックアップする。
- 呼吸やまばたきの2～3コマを描く。
- 足を固定してループを確認する。
具体例
長めの待機アニメーションに1コマだけまばたきを入れる方法もあります。
練習課題
歩行と異なるリズムの待機動作を完成させる。
注意点: 注意：落ち着いた待機中に大きく位置を変えないこと。
スプライトシートを書き出して確認する
スプライトシートは複数コマを1枚に並べた画像です。Pixambasでは横、縦、グリッド形式を選べます。GameMakerでは横一列の_stripN形式、GodotとUnityでは均等なグリッドが便利です。直接連携するプラグインではありません。
手順
- 書き出しで全コマを選び、元のピクセルサイズなら倍率1にする。
- GameMaker向けには横一列と_stripNを選ぶ。
- GodotやUnity向けにはグリッド形式でセルの幅と高さを確認する。
具体例
32×32の4コマは横一列なら128×32、2列のグリッドなら64×64です。
練習課題
両形式で書き出し、サイズを確認してゲームエンジンに読み込む。
注意点: 注意：コマごとにサイズが異なると正しく分割できないことがあります。
最終課題
6つのレッスンの成果をまとめます。PNGと編集可能なプロジェクトのバックアップを書き出し、等倍表示で確認して次に改善する点をひとつ書きます。
Pixel Studioを開く →理解度チェック
読み込みの参考資料
このブラウザーに保存された制作データは他の端末に自動で同期されません。バックアップを書き出してください。