この講座で学ぶこと
- シーンのグリッドを決める
- 少ない色で素材を表現する
- 繰り返し模様の継ぎ目をなくす
- 地形の境界と角を作る
PixambasのPixel Studioと新しいブラウザー。アカウント登録は不要です。
入門コースで学んだ内容を、Pixambasでの実際の制作課題を通して発展させます。 Pixel Studioを開く →
学習の進捗
このブラウザーに進捗が保存されます。
シーンのグリッドを決める
タイルはマップ作成に使用する一定サイズの画像です。ゲームに合わせて16×16または32×32を選び、地面・壁・小物をどう分けるか決めます。
手順
- 16×16または32×32のグリッドを作る。
- 同じ配色で地面と壁を1枚ずつ描く。
- 横に並べて境界が合うか確認する。
具体例
16×16のタイル4枚を2×2に並べると32×32になります。
練習課題
同じグリッドに合う2種類のタイルを作る。
注意点: 注意：タイルごとに異なるサイズを無計画に選ばないこと。
少ない色で素材を表現する
石や草の葉をすべて描く必要はありません。まとまった色の形、明暗、一定方向の光で材質を表現します。色を増やしすぎると景色の統一感が失われます。
手順
- 土と草用に5色を選ぶ。
- 最も暗い色を隙間や奥行きに使う。
- 等倍で別の背景に重ねて確認する。
具体例
小さな色の塊だけでも草らしさを表現できます。
練習課題
同じ光の方向を持つ土と草のタイルを作る。
注意点: 注意：ブロックごとに影の方向を変えないこと。
繰り返し模様の継ぎ目をなくす
繰り返すタイルは、左右と上下の端の模様がつながる必要があります。周囲にコピーを並べて確認し、装飾を加える前に継ぎ目を修正します。
手順
- 簡単な地面の模様を描く。
- 3×3にコピーして継ぎ目を観察する。
- 端のピクセルを調整して切れ目を減らす。
具体例
右端で突然終わる暗い線は、繰り返すと目立つ継ぎ目になります。
練習課題
3×3で目立つ継ぎ目のない模様を完成させる。
注意点: 注意：タイル1枚だけを見て完成と判断しないこと。
地形の境界と角を作る
地面と草のような異なる素材をつなぐために境界タイルを使います。まず上辺と側面を作り、次に内側・外側の角を描きます。すべてのゲームに完全な自動タイル機能が必要とは限りません。
手順
- 土の基本タイルを用意する。
- 草の上辺と角を描く。
- 4枚を並べて線がつながるか確認する。
具体例
外側の角は隣の直線的な境界と高さをそろえます。
練習課題
角を含む小さな地形のつなぎ目を完成させる。
注意点: 注意：直線の境界とつながらない角を作らないこと。
自然なバリエーションを追加する
石や花などの小物を少量変えると同じ模様が続く印象を減らせます。ただし装飾が多すぎると地面が読みにくくなります。基本形と同サイズの2種類の変化を用意します。
手順
- 基本タイルを複製し、小石を描き足す。
- 別の複製に芽や小さな印を追加する。
- 6×4マスに並べてバランスを確認する。
具体例
装飾のないマスを多めにし、装飾つきは少なく使うと見やすくなります。
練習課題
24マスの地面を作り、目立ちすぎる部分を修正する。
注意点: 注意：すべてのマスに強いコントラストを付けないこと。
タイルセットを出力してテストする
タイルセットは複数のタイルを1枚にまとめた画像です。ゲームエンジンが正しく分割できるよう一定サイズのセルを守ります。レベルの配置はエンジン側で行い、Pixambasでは画像を書き出します。
手順
- タイルを規則正しい行と列に並べる。
- 意図しない拡大をせずPNGとして書き出す。
- エンジンでセルサイズを指定して読み込み、境界を確認する。
具体例
16ピクセルのタイルを横4列に配置すると画像幅は64ピクセルです。
練習課題
タイルシートを書き出し、地面と壁のある小さな場面を作る。
注意点: 注意：セルの間隔が不規則だと正しく切り出せません。
最終課題
6つのレッスンの成果をまとめます。PNGと編集可能なプロジェクトのバックアップを書き出し、等倍表示で確認して次に改善する点をひとつ書きます。
Pixel Studioを開く →理解度チェック
読み込みの参考資料
このブラウザーに保存された制作データは他の端末に自動で同期されません。バックアップを書き出してください。