Tiniest2Dで2Dゲームを作る
スプライトとアニメーション
Lesson 3 of 11 • 10 XP
Keep your place in this quest
Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.
アセットの作成
アセットは、ゲームで使用される要素です:画像、シーン、音、オブジェクト。Tiniest2Dでは、スクリプトに変数を記述することでほとんどのアセットを作成します。エディタは Sprite() のようなコンストラクタに気付き、アセットを視覚的に編集できます。

スプライト
スプライトはピクセルアートの画像です。キャラクター、壁、コイン、ボタン、弾丸、背景、その他描画が必要なものに使用されます。スプライトは単一の画像でも、複数のフレームから作られた小さなアニメーションでもかまいません。
スプライトを作成するには、Sprite() コンストラクタで変数を宣言します:
var playerSprite = Sprite(16, 16)
var coin = Sprite(8, 8)
var wall = Sprite(32, 32)
数字は、幅と高さ(ピクセル単位)です。保存すると、変数名は 暗いボックス で囲まれます - これはスプライトアセットであることを示しています。
スプライトを編集するには:
- Ctrl+クリック でスプライト変数名をクリック
- スプライトエディタが開きます
スプライトエディタのコントロール

スプライトエディタでは、画像をピクセル単位で描画します。ピクセルアートが初めての場合は、小さいサイズから始めましょう:8x8 または 16x16 のスプライトは、読みやすく、編集しやすく、アニメーションも簡単です。
| コントロール | アクション |
|---|---|
| 左クリック | 現在の色でピクセルを塗る |
| 右クリック | ピクセルを消去(透明) |
| 中ボタンドラッグ | ビューをパンする |
| マウスホイール | ズームイン/アウト |
| カラーパレット | 色を選択するためにクリック |
| 幅/高さ +/- | スプライトのサイズを変更 |
| コリジョントグル | 衝突境界を有効/無効にする |
| コリジョンオフセット | 上下左右の衝突内側を調整 |
| コリジョン表示 | 衝突境界をプレビュー |
| スペース | アニメーションプレビューを切り替える |
| 左/右矢印 | フレーム間を移動 |
| エスケープ | スクリプトエディタに戻る |
アニメーションパネル
アニメーションは、複数のスプライトフレームを迅速に表示することで作成されます。たとえば、歩いているキャラクターは、左足が前に出ているフレームと、右足が前に出ている別のフレームを持つかもしれません。

アニメーションパネル(左のサイドバーにあります)を使用すると、スプライトフレームを管理できます:
| コントロール | アクション |
|---|---|
| FPS +/- | アニメーション速度を調整(フレーム毎秒) |
| フレームの追加 | 最後に新しい空白フレームを追加 |
| フレームのコピー | 現在のフレームを複製(現在の後に挿入) |
| フレームの削除 | 現在のフレームを削除(1フレーム以上ある場合のみ) |
| フレームストリップ | 下部のサムネイルをクリックしてフレームを選択 |
スプライトが複数のフレームを持つ場合、そのスプライトを使用するオブジェクトは、ランタイムで自動的にアニメーションします。各オブジェクトは、自分のアニメーション状態を独立して追跡します。