tinyswords-tilemap

Tiny Swords タイルマップ

Tiny Swords アセットパックを使って、適切な高低差、影、アニメーションする水のエフェクトを備えた、美しいレイヤー構成のタイルマップを作成します。

考え方：視覚的なストーリーテリングとしての高低差

タイルマップは単なる画像のグリッドではありません。奥行きと立体感を生み出す、レイヤー構成の画面です。Tiny Swords のタイルセットでは、影と高低差を組み合わせた巧みなレイヤーシステムによって、2D 平面上に 3D の地形があるように見せています。

タイルを配置する前に、次の点を確認してください：

• このエリアにはどのような高低差が必要ですか？
• プレイヤーの視線はどこに誘導されますか？
• 影はどのように高さの感覚を強めますか？
• 波の泡のアニメーションがずれていて、水が生き生きと見えますか？

基本原則：

1. レイヤーが奥行きを生み出す：高低差のある各レベルに「影」と「高所の地面」のレイヤーを追加します。重ねることで、見た目に高さが生まれます。
2. 影が高低差を際立たせる：歩行可能な地面の 1 タイル下に影を置くと、崖が本物らしく見えます。
3. アニメーションが単調さをなくす：水の泡のスプライトの開始フレームをずらすと、「壁紙のような効果」を防げます。
4. 色でレベルを見分けやすくする：高低差ごとに異なる地形の色を使うと、プレイヤーがマップをすぐに把握できます。

タイルの仕様

要素	サイズ	備考
標準タイル	64x64 px	すべての地形で使う基本グリッド単位
影のスプライト	128x128 px	64x64 グリッドに配置し、隣接するタイルに重ねます
アニメーションフレーム	64x64 px	スプライトシート内の水の泡のフレーム

6 つの地形コンポーネント

1. BG カラー - 水の背景の塗りつぶし（最下層）
2. 水の泡 - 地形が水と接する場所に表示するアニメーションする波
3. 平地 - 水に隣接する、最も低い歩行可能な地形
4. 影 - 高所の下に配置する奥行き用スプライト
5. 高所の地面 - 崖の縁を持つ高い地形
6. 階段 - 高低差のあるレベルをつなぐパーツ

レイヤーの順序（下から上へ）

┌─────────────────────────────────────────┐
│  Elevated Ground (Level N)              │  ← Repeat for each
│  Shadow (Level N)                       │    elevation level
├─────────────────────────────────────────┤
│  Elevated Ground (Level 2)              │
│  Shadow (Level 2)                       │
├─────────────────────────────────────────┤
│  Elevated Ground (Level 1)              │
│  Shadow (Level 1)                       │
├─────────────────────────────────────────┤
│  Flat Ground                            │
│  Water Foam (animated)                  │
│  BG Color (water background)            │
└─────────────────────────────────────────┘

影の配置

影によって高さがあるように見せられます。それぞれの影のスプライトは、対応する歩行可能な高所の地面から64x64 タイル 1 つ分下に配置します。

Grid visualization:
    ┌────┬────┬────┐
    │    │WALK│    │  ← Elevated walkable area
    ├────┼────┼────┤
    │    │SHAD│    │  ← Shadow positioned here (one tile down)
    └────┴────┴────┘

128x128 の影のスプライトは 64x64 グリッド上に配置するため、隣接するタイルに重なり、滑らかな奥行きの変化を生み出せます。

水の泡のアニメーション

水の泡にはアニメーションがあり、自然に見せるには開始フレームをずらす必要があります。

実装パターン：

// Each foam sprite instance starts at a random/offset frame
foamSprites.forEach((sprite, index) => {
  sprite.animationOffset = index % totalFrames;
  // OR
  sprite.animationOffset = Math.floor(Math.random() * totalFrames);
});

これにより、すべての水が一斉に動いて呼吸しているように見える効果を防げます。

階段の構成

階段は、隣接する地形に応じて次の 2 種類の構成で高低差のあるレベルをつなぎます。

隣接する地形	階段のパーツ	説明
歩行可能な地面	中央のパーツ 1 つ	最小限の接続
崖の縁	2 つのパーツ（上部＋下部）	崖との段差を含む完全な階段

地形の色のバリエーション

5 種類の地形の色（Tilemap_color1.png から Tilemap_color5.png）を使用できます。視覚的な区別を強めるため、高低差ごとに異なる色を使いましょう。

Level 3: color5 (purple/dark)
Level 2: color3 (brown)
Level 1: color1 (green)
Flat:    color2 (sand/beach)

色は意図的に組み合わせてください。決まった順序はありませんが、隣り合うレベルのコントラストを高めると、マップが読み取りやすくなります。

避けるべきアンチパターン

レイヤー構成が平坦：すべての地形を 1 つのレイヤーに配置する

• 問題点：奥行きが失われ、平坦なテクスチャのように見えます
• 改善策：影を含むすべてのレイヤーを使います

水のアニメーションが同期：すべての泡のスプライトを同じフレームにする

• 問題点：不自然な「脈動」効果が生まれます
• 改善策：アニメーションの開始フレームをずらします

影の位置がずれている：高所の地面の真下や横に影を置く

• 問題点：高さの錯覚が崩れます
• 改善策：歩行可能な地面からタイル 1 つ分下に影を配置します

高低差が単調：すべてのレベルで同じ地形の色を使う

• 問題点：マップの奥行きを視覚的に把握しにくくなります
• 改善策：高低差のあるレベルごとに異なる色を使います

崖の種類を考慮しない：状況に合わない崖の縁を使う

• 問題点：地形の境界で視覚的なつながりが損なわれます
• 改善策：水の近くでは水側を向いた崖を、低い地面の近くでは地形側を向いた崖を使います

バリエーションの指針

マップはコンテキストに応じて変化させてください：

• 島のマップ：水面の泡を増やし、標高レベルを減らします
• 山岳マップ：標高レベルを複数にし、水面を減らします
• 混合地形：色に変化をつけながら、すべての要素を組み合わせます

次のようなパターンに収束しないようにしてください：

• すべてに常に color1 を使う
• 毎回、標高レベルがちょうど 2 つ
• 階段の配置パターンが同一
• 影の密度が均一

アセットパスのリファレンス

このプロジェクトのファイルパス一覧については、references/asset-paths.md を参照してください。

覚えておいてください

Tiny Swords タイルセットは、レイヤーによる奥行き表現を目的に設計されています。すべての影、水面の泡のアニメーションオフセット、色の選択が、生き生きとした立体感のあるマップづくりに貢献します。レイヤーシステムを活用してください。正しく使えば、美しい仕上がりになるよう設計されています。