歩行アニメのスプライトアニメーション

定番中の定番。歩行アニメは左右それぞれの足で「接地・沈み込み・パッシング・伸び上がり」を繰り返す2歩分のループです。接地フレームで足をしっかり固定しているので、キャラが滑って見えません。

無料のマネキンシートをダウンロード JSON

PNG スプライトシート + JSON フレームデータ。商用ゲームを含め、どんなプロジェクトにも無料で使えます。

仕様

フレーム数: 8
推奨 FPS: 9
フレームサイズ: 42×68
種類: ループ
視点: 横向き

このモーションに自分のキャラを乗せる

キャラクターを説明するかアップロードすると、このモーションにそのまま着せ付けます。タイミングも接地も同じで、絵はあなたのキャラです。

10クレジット消費

歩行アニメアニメーションをエンジンで使う

シートはパディングなしの同サイズのフレームが1行（または数行）並んだものなので、どのエンジンでもフレームサイズで分割できます。主要エンジン向けの最小限の設定を、このモーションのフレーム数・サイズ・フレームレートを入れた状態で載せています。

これはループモーションです。アニメーションをループ設定にすれば、つなぎ目なく繰り返します。

Godot 4

# AnimatedSprite2D > SpriteFrames > "Add frames from sprite sheet"
# Horizontal: 8, Vertical: 1, select all 8 frames.
$AnimatedSprite2D.sprite_frames.set_animation_speed("walk", 9)
$AnimatedSprite2D.sprite_frames.set_animation_loop("walk", true)
$AnimatedSprite2D.play("walk")
# Project Settings > Rendering > Textures > Default Texture Filter = Nearest

Unity

// Texture: Sprite Mode = Multiple, Filter = Point, Compression = None
// Sprite Editor > Slice > Grid By Cell Size: 42 x 68
// Drag all 8 sprites into the scene to create the clip, then:
// Animation window > Samples = 9, Loop Time = on

Phaser 3

this.load.spritesheet("walk", "walk.png", { frameWidth: 42, frameHeight: 68 });
// in create():
this.anims.create({
  key: "walk",
  frames: this.anims.generateFrameNumbers("walk", { start: 0, end: 7 }),
  frameRate: 9,
  repeat: -1,
});
player.play("walk"); // with pixelArt: true in the game config