Picture Grid Engine

Picture Grid Engine（ピクチャー・グリッド・エンジン）は、画像や動画を探索可能なゲーム空間へ変換するHTML5ゲームエンジンです。

プログラミングの知識がなくても、画像・動画・音楽・JSONステージデータを用意するだけで、オリジナルの探索ゲームを制作できます。

イラスト、写真、AIアート、動画作品の中を実際に歩き回り、イベントやパズルを配置した独自の作品世界を構築できます。

「あなたの画像の中を歩こう。」

---

## 主な特徴

### 1. 画像をゲーム世界へ変換

任意の画像をゲームステージとして利用できます。

イラスト、写真、AI生成画像、ドット絵、美術作品など、あらゆる画像をそのまま探索可能なフィールドへ変換できます。

プレイヤーは画像内を歩いて、走って、自由に移動できます。

対応形式： PNG、JPG、GIF

サイズ： 16:9の比率を推奨します。

1ステージは以下の2枚の画像で構成されます。

・レイヤー2（表画像）

プレイヤーが最初に見る画像

・レイヤー1（裏画像）

修復によって現れる画像

それぞれにステージ用画像（幅1000px前後を推奨）とサムネイル画像（幅500px前後を推奨）を用意することで、合計4枚の画像で1ステージを構築できます。

グリッド設定：

Picture Grid Engine では、画像を任意のグリッドへ分割して扱います。

グリッド数は自由に設定でき、探索範囲やパズルの難易度に直接影響します。

1×1のシンプルな展示作品から、高密度なパズルステージまで制作できます。

---

### 2. ペイント修復モード[paint]

黒く覆われた世界を歩き回りながら修復していくモードです。

表のレイヤー2の画像の上をプレイヤーが移動した軌跡に沿って、裏のレイヤー1の画像が復元されます。

修復率に応じてゴールが解放されます。

適している用途：探索ゲーム、ウォーキングシミュレーター、美術館作品、ストーリー重視のゲームなど

---

### 3. パネル修復モード[panel]

画像を分割・シャッフルし、正しい位置へ並べ替えるモードです。

フィールド内を移動しながら表のレイヤー2のパネルを選択して位置を交換し、画像全体を完成させます。

完成率がリアルタイムで表示されます。

画像が完成すると、裏のレイヤー1の画像が表示されます。

適している用途：ジグソーパズル、スライドパズル、謎解きゲーム、観察力を活かしたゲーム

---

### 4. ハイブリッド修復モード[restoring]

前半をパネル修復モード、後半をペイント修復モードとして組み合わせた二段階ステージです。

まず表のレイヤー2の画像を完成させ、その後、フィールド探索へ移行し、裏のレイヤー1の画像を復元していきます。

適している用途：ストーリー演出、最終ステージ、重要イベント

---

### 5. 動画対応

裏用（レイヤー1）には、画像だけでなく動画も使用可能です。

MP4やWebM形式の動画を利用することで、動く風景やアニメーション背景を探索空間として利用できます。

動画は自動でループ再生されます。

---

### 6. イベントシステム（ペイント修復モード用）

マップ上の任意の位置へ会話・説明・ストーリーイベントを配置できます。

イベントには以下を設定できます。

* タイトル

* メッセージ本文（「\n」でメッセージ内改行可能）

* 通常イベント（▼マーク）

* ゴールイベント（★マーク）

プレイヤーが近づき、Aボタンを押すことでメッセージを表示できます。

※パネル修復モードではイベントシステムは機能しません。

---

### 7. 隠しイベント

ペイント修復モード時、通常イベント（▼マーク）は最初から見えていますが、

これらのイベントは、プレイヤーが周辺を探索すると初めて出現する隠しイベントへ変更できます。

ミニマップや探索システムと組み合わせることで、秘密の発見やストーリー演出を作れます。

---

### 8. ゴール解放システム

ペイント修復モードでは、修復率（画像全体のうち、修復したグリッドの％）に応じてゴール（★マーク）を解放できます。

一定の修復率を満たした後のみ、ステージクリアが可能になります。

---

### 9. ミニマップ

探索状況をリアルタイムで表示します。

未探索エリアと探索済みエリアを視覚的に確認できます。

* 探索済みエリア

* プレイヤー位置

* イベント位置

* ゴール位置

* 現在の視界範囲

を確認できます。

---

### 10. ズーム機能

プレイヤー視点の拡大・縮小に対応しています。

ゲーム中いつでも、画像全体を眺めることも、細部を観察することもできます。

演出としてゲーム開始時のズーム率を設定することもできます。

大規模な風景画像から細かなイラスト作品まで、幅広い素材に対応できます。

---

### 11. ステージ選択画面

複数のステージを管理できます。

サムネイル表示、ページ送り、ステージロックに対応しています。

クリア状況やベストタイムも自動で記録されます。

---

### 12. ステージロック機能

特定ステージのクリアを解放条件として設定できます。

条件を満たしたステージのみ解放されます。

複数のステージや、ステージの範囲を条件にすることも可能です。

分岐進行やストーリー進行に利用できます。

---

### 13. ステージ別設定

各ステージごとに以下のパラメータを変更できます。

* 移動速度

* ダッシュ速度

* 修復ブラシサイズ

* イベント判定距離

* キャラクターサイズ

* キャラクター表示有無

ステージごとに異なるプレイ感を演出できます。

---

### 14. タイムアタック機能

プレイ時間を自動計測します。

ステージごとのベストタイムを保存できます。

探索ゲームだけでなく、スコアアタックやRTA風の作品制作にも利用できます。

---

### 15. URLセーブ機能

クリア状況やベストタイムをURLへ保存できます。

サーバーやデータベースを利用せずに進行状況を共有できます。

生成されたURLを保存するだけで続きからプレイ可能です。

HTMLファイル単体で公開する作品との相性に優れています。

---

### 16. エンディング演出

ステージクリア時には専用演出を再生できます。

* カメラズームアウト

* グリッド消去

* 完成画像の表示

* テキスト演出

を組み合わせたエンディングシーケンスを実装できます。

---

### 17. BGM・効果音対応

タイトル画面、ステージ、クリア演出ごとにBGMを設定できます。

また、イベントや操作時の効果音にも対応しています。

ハイブリッド修復モードでは、前半のパネル修復モードと後半のペイント修復モードとでBGMを分けることもできます。

状況に応じた音楽演出により、作品世界をより豊かに表現できます。

---

### 18. キーボード・マウス・タッチ対応

以下の入力方式に対応しています。

* キーボード

* マウス

* タッチ操作

* 仮想パッド

PC・スマートフォンの両方でプレイ可能です。

---

### 19. HTML5のみで動作

インストール不要。

ブラウザだけで動作します。

Windows、Mac、Linux、Android、iPhoneなど、HTML5対応環境で利用できます。

---

## 想定用途

Picture Grid Engine は以下のような作品制作を想定しています。

* 探索ゲーム

* アドベンチャーゲーム

* デジタル展示会

* 写真作品集

* 美術作品展示

* 教材コンテンツ

* パズルゲーム

* ストーリーゲーム

* AIアート展示

* 思い出アルバム

* インタラクティブポートフォリオ

例えばこんな使い方も：

レイヤー1とレイヤー2のファイルの中身を敢えて同じ画像にすることで、単純な絵合わせゲームにすることもできます。

グリッド数を敢えて分割せずに縦横１マスに設定し、イベントを設定することで、コメント付きの画像ビューアのようにもできます。

---

## あなたの画像の中を歩こう

Picture Grid Engine はゲームを作るためだけのエンジンではありません。

一枚の画像、一つの映像作品を、探索できる空間へ変えるためのエンジンです。

あなたの作品世界を、プレイヤーが実際に歩き回れる場所へ変えてみてください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

# Picture Grid Engine Ver 1.0

Picture Grid Engine is an HTML5 game engine that transforms images and videos into explorable game worlds.

Without any programming knowledge, you can create original exploration games simply by preparing images, videos, music, and JSON stage data.

Walk through illustrations, photographs, AI-generated artwork, and video creations as actual game spaces. Place events, puzzles, and story elements to build your own interactive world.

**"Walk inside your images."**

---

# Main Features

## 1. Turn Images into Game Worlds

Any image can be used as a game stage.

Illustrations, photographs, AI-generated images, pixel art, paintings, and other visual works can be transformed directly into explorable fields.

Players can walk, run, and freely move around inside the image.

**Supported formats:** PNG, JPG, GIF

**Recommended aspect ratio:** 16:9

Each stage consists of two images:

**Layer 2 (Front Image)**

The image initially visible to the player.

**Layer 1 (Back Image)**

The image revealed through restoration.

By preparing both stage images (recommended width: around 1000px) and thumbnail images (recommended width: around 500px) for each layer, a complete stage can be created using four images in total.

### Grid System

Picture Grid Engine divides images into customizable grids.

The number of grid cells can be freely adjusted, directly affecting exploration scale and puzzle difficulty.

You can create anything from a simple 1×1 exhibition piece to a highly detailed puzzle stage.

---

## 2. Paint Restoration Mode [paint]

Restore a world covered in darkness by exploring it.

As the player moves across the front Layer 2 image, the hidden Layer 1 image is gradually revealed along the player's path.

The goal becomes available when the required restoration percentage is reached.

**Ideal for:**

* Exploration games

* Walking simulators

* Digital exhibitions

* Story-driven experiences

---

## 3. Panel Restoration Mode [panel]

Divide and shuffle an image, then rearrange the pieces into their correct positions.

Players move around the field, select panels from the front Layer 2 image, and swap their locations to complete the picture.

The completion percentage is displayed in real time.

Once the image is completed, the back Layer 1 image is revealed.

**Ideal for:**

* Jigsaw puzzles

* Sliding puzzles

* Mystery games

* Observation-based gameplay

---

## 4. Hybrid Restoration Mode [restoring]

A two-phase stage that combines Panel Restoration Mode and Paint Restoration Mode.

Players first complete the front Layer 2 image through panel restoration. Afterward, the game transitions into field exploration, where the hidden Layer 1 image is gradually restored.

**Ideal for:**

* Story sequences

* Final stages

* Major events

---

## 5. Video Support

Layer 1 (Back Layer) supports video files in addition to images.

By using MP4 or WebM videos, animated scenery and moving backgrounds can become explorable spaces.

Videos automatically loop during gameplay.

---

## 6. Event System (Paint Restoration Mode)

Conversations, descriptions, and story events can be placed anywhere on the map.

Events support:

* Title

* Message text

* Standard events (▼)

* Goal events (★)

Players can interact with nearby events by pressing the A button.

*Note: The event system is not available in Panel Restoration Mode.*

---

## 7. Hidden Events

In Paint Restoration Mode, standard events (▼) are normally visible from the beginning.

However, events can instead be configured as hidden discoveries that only appear when players explore nearby areas.

Combined with the minimap and exploration systems, this allows for secrets, hidden stories, and discovery-based gameplay.

---

## 8. Goal Unlock System

Goals (★) can be locked behind restoration progress.

The goal becomes available only after the player reaches a specified restoration percentage.

This allows exploration progress to directly influence stage completion.

---

## 9. Minimap

The minimap displays exploration progress in real time.

Players can view:

* Explored areas

* Unexplored areas

* Player position

* Event locations

* Goal location

* Current camera view

---

## 10. Zoom System

The camera can zoom in and out at any time.

Players may either view the entire image or closely inspect small details.

An initial zoom level can also be specified for dramatic presentation.

Suitable for both large landscape images and highly detailed artwork.

---

## 11. Stage Selection Screen

Manage multiple stages from a single project.

Features include:

* Thumbnail display

* Page navigation

* Stage locking

Clear status and best completion times are automatically saved.

---

## 12. Stage Lock System

Stages can be locked behind completion requirements.

Conditions may include:

* Clearing specific stages

* Clearing multiple stages

* Clearing stage ranges

Useful for branching progression and story-driven projects.

---

## 13. Per-Stage Settings

Each stage can customize:

* Movement speed

* Dash speed

* Restoration brush size

* Event interaction distance

* Character size

* Character visibility

This allows every stage to have its own gameplay feel.

---

## 14. Time Attack Support

Play time is automatically recorded.

Best completion times can be saved for each stage.

Suitable not only for exploration games but also for score attack and speedrun-oriented projects.

---

## 15. URL Save System

Clear data and best times can be stored directly within a URL.

Progress can be shared without servers or databases.

Players can continue from where they left off simply by saving the generated URL.

Especially useful for projects distributed as standalone HTML files.

---

## 16. Ending Sequences

Custom ending presentations can be played when a stage is completed.

Available effects include:

* Camera zoom-out

* Grid removal

* Completed image display

* Text presentation

These can be combined to create cinematic ending sequences.

---

## 17. BGM and Sound Effects

Background music can be assigned separately for:

* Title screen

* Individual stages

* Clear sequences

In Hybrid Restoration Mode, different BGMs can be used for the panel phase and the paint phase.

Context-sensitive audio helps enrich the atmosphere of your project.

---

## 18. Keyboard, Mouse, and Touch Support

Supported input methods:

* Keyboard

* Mouse

* Touch controls

* Virtual gamepad

Playable on both desktop and mobile devices.

---

## 19. Pure HTML5

No installation required.

Runs directly in a web browser.

Compatible with Windows, Mac, Linux, Android, iPhone, and other HTML5-capable environments.

---

# Intended Uses

Picture Grid Engine is designed for projects such as:

* Exploration games

* Adventure games

* Digital exhibitions

* Photography collections

* Art showcases

* Educational content

* Puzzle games

* Story-driven experiences

* AI art galleries

* Memory albums

* Interactive portfolios

### Additional Ideas

You can use the same image for both Layer 1 and Layer 2 to create a simple picture-matching puzzle.

You can also set the grid size to 1×1 and place events throughout the image, effectively turning it into an interactive image viewer with commentary.

---

# Walk Inside Your Images

Picture Grid Engine is not just an engine for making games.

It is an engine for transforming a single image or video work into an explorable space.

Turn your creative world into a place where players can truly walk around and explore.