+
+Figure 1. World Size dimensions (in pixels).
+ Success check: - The canvas is empty and the scene graph does not show leftover sprites or formations. +- The World Size is `800 x 600`, as shown in the Viewport panel (Figure 1). + +## Import the Demo Pack Assets -## 1. Import the Demo Pack Assets +1. Using the Assets Dock at the bottom of the left sidebar, click "+ Add". -Use the Assets Dock on the left side. Click "+ Add" at the top right of the Dock, then select "From demo pack". + - **NOTE:** A popup menu will appear.
-Figure 4. Assets Dock add menu showing the Demo Pack import option.
+Figure 2. Assets Dock add menu showing the Demo Pack import option.
-Success check: -- You can see a list of sprites with thumbnails show in the Assets Dock. +2. In the popup menu, select "From demo pack". + + - **NOTE:** A list of sprites with thumbnails will appear in the Assets Dock.
-Figure 5. Assets Dock after importing the Demo Pack assets.
+Figure 3. Assets Dock after importing the Demo Pack assets.
-## 2. Create the Sprites +## Create the Sprites -In the Assets Dock under Images, scroll down to find the image labeled "ship_sidesA". +1. In the Assets Dock under Images, scroll down to find the image labeled "ship_sidesA". -Drag the ship_sidesA image from the Dock onto the center canvas to create a spaceship object (or "sprite") there. +2. Drag the ship_sidesA image from the Dock onto the center canvas to create a spaceship object (or "sprite") there. -- **NOTE:** If everything goes correctly, you will see the ship (titled "entity") also show up in the Sprites list in the left sidebar. + - **NOTE:** If everything goes correctly, you will see the ship (titled "entity") also show up in the Sprites list in the left sidebar. The imported ship will look a bit too large on the canvas; this is normal. -The imported ship will look a bit too large on the canvas; click on the ship to select it, then reduce its `Scale X (%)` to `50` in the Inspector (in the right sidebar) +3. Click on the ship to select it, then reduce its `Scale X (%)` to `50` in the Inspector (in the right sidebar). -- **NOTE:** changing `Scale X (%)` to `50` will automatically change `Scale Y (%)` to `50` as well; the aspect ratio is locked together with the highlighted link button. + - **NOTE:** Changing `Scale X (%)` to `50` will automatically change `Scale Y (%)` to `50` as well; the aspect ratio is locked together with the highlighted link button. -After you've reduced the ship size, hold down the Alt key and drag the ship sprite to a new location to duplicate it until you have seven ships total. +4. Hold down the Alt key and drag a copy of the spaceship sprite to a new location until you have seven ships total. -Name the seven ships you duplicated: +5. Rename each of the seven ships you duplicated, starting with the ship titled `entity` in the Sprites list (in the left sidebar). + + a. Click the ship name to highlight it + + b. Hit the `F2` key (Rename) + + c. Delete the old entity title -1. `Wave` -2. `Zigzag` -3. `Figure-8` -4. `Orbit` -5. `Spiral` -6. `Bounce` -7. `Patrol` + d. Type `Wave` followed by the `ENTER` key -Do this by clicking the first ship name (titled 'entity') in the Sprites list in the left sidebar to highlight it. Now hit the `F2` key (Rename), delete the old `entity` title, type `Wave`, and hit the `ENTER` key. +6. Move to the next sprite name in the list (`entity2`) by hitting the `Down Arrow` on your keyboard, then follow the same procedure above to rename it. -Move to the next sprite name in the list (`entity2`) by hitting the `Down Arrow` on your keyboard, then follow the same procedure above to rename it. + - top row: `Wave`, `Zigzag`, `Figure-8`, `Orbit` + - bottom row: `Spiral`, `Bounce`, `Patrol` -Continue until you have renamed all seven sprites to the names above, so the later pattern steps are easier to follow. +7. Continue until you have renamed all seven sprites to the names above, so the later pattern steps are easier to follow.
-Figure 6. Scene graph Sprites list after renaming all seven ships.
+Figure 4. Scene graph Sprites list after renaming all seven ships.
Success check: - You can see seven separate sprite entities in the scene graph. - Their names match the list above. -## 3. Position the Ships with Selection Tools and Layout +## Position the Ships with Selection Tools and Layout -Rough-place the ships first, then use `Layout…` to clean up spacing. The pattern demo uses two rows: +1. Rough-place the ships first, then use `Layout…` to clean up spacing. The pattern demo uses two rows: -- top row: `Wave`, `Zigzag`, `Figure-8`, `Orbit` -- bottom row: `Spiral`, `Bounce`, `Patrol` + - top row: `Wave`, `Zigzag`, `Figure-8`, `Orbit` + - bottom row: `Spiral`, `Bounce`, `Patrol`
-Figure 7. On-canvas selection bar for multi-selection actions.
+Figure 5. On-canvas selection bar for multi-selection actions.
-Figure 8. Layout popover for spacing and set-position operations.
+Figure 6. Layout popover for spacing and set-position operations.
-For the top row, drag-select (or SHIFT-click to select) the four ships and use `Layout…` to: +2. For the top row, drag-select (or SHIFT-click to select) the four ships and use `Layout…` to: -- Under Spacing, type `180` in the `Spacing X` box, then hit `Apply Spacing X`. -- Under Position Selection, type `200` in the `Y` box, then hit `Set Y`. -- Finally, under Align Selection, hit `Center X`. + - Under Spacing, type `180` in the `Spacing X` box, then hit `Apply Spacing X`. + - Under Position Selection, type `200` in the `Y` box, then hit `Set Y`. + - Finally, under Align Selection, hit `Center X`. -For the bottom row, drag-select (or SHIFT-click to select) all three ships and use `Layout …` again. Set `Spacing X` to `180`, **`Y` to `420`**, then center the ships with `Center X` as above. +3. For the bottom row, drag-select (or SHIFT-click to select) all three ships and use `Layout …` again. Set `Spacing X` to `180`, **`Y` to `420`**, then center the ships with `Center X` as above.
-Figure 9. Ships lined up - success check.
+Figure 7. Ships lined up - success check.
Success check: - The four top-row ships are equally spaced and centered, and sit on same `Y = 200` baseline. - The three bottom-row ships are equally spaced and centered, and sit on same `Y = 420` baseline. -## 4. Add the Text Labels +## Add the Text Labels + +1. In the left sidebar, under Scene Graph, click the "+ Add" button beside Text. + + - **NOTE:** This will create one text entity called 't'. + +2. Hit the F2 key and rename the text entity to "Wave" + +3. Rough-place the text entity (i.e., drag it) over top of the Wave sprite (the leftmost of the top row of sprites). + +4. Hit the F3 key and type in "Wave" as the text property of the highlighted entity. -In the left sidebar, under Scene Graph, click the "+ Add" button beside Text. -**NOTE:** This will create one text entity called 't'. + - **NOTE:** you should see the text change for the entity in the Canvas. -Hit the F2 key and rename the text entity to "Wave", then rough-place it (i.e., drag it) over top of the Wave sprite (the leftmost of the top row of sprites). -Next, hit the F3 key and type in "Wave" as the text property of the highlighted entity. -**NOTE:** you should see the text change for the entity in the Canvas. +5. Repeat these steps for each of the sprites in the top and bottom rows until you have named labels over each of the ship sprites. -Repeat these steps for each of the sprites in the top and bottom rows until you have named labels over each of the ship sprites. + - top row: `Wave`, `Zigzag`, `Figure-8`, `Orbit` + - bottom row: `Spiral`, `Bounce`, `Patrol` + - **NOTE:** You may be tempted to use Alt-Drag to duplicate the text entities as you did earlier with the ship sprites, but duplicating the text entities also copies their name and text as well, so this can quickly get confusing. Using "+ Add" is the better approach in this scenario. -**NOTE:** You may be tempted to use Alt-Drag to duplicate the text entities as you did earlier with the ship sprites, but duplicating the text entities also copies their name and text as well, so this can quickly get confusing. Using "+ Add" is the better approach in this scenario. +6. Drag-to-select (or SHIFT-click to select each of) the top-row labels, and in the popup Selection Bar, use `Layout …`: -Lastly, drag-select (or SHIFT-click to select) the top-row labels, and in the popup Selection Bar, use `Layout …`. -Under Arrange Items, click "Distribute X", and under Position Selection, type `120` under `Y`, then click `Set Y`. Finally, under Align Selection, click "Center X". -Click the "Close" button at the bottom of the Layout popup, or just click in a blank area of the canvas to close it. + - Under Arrange Items, click `Distribute X`. + - Under Position Selection, type `120` under `Y`, then click `Set Y`. + - Under Align Selection, click `Center X`. + - Click the "Close" button at the bottom of the Layout popup, or just click in a blank area of the canvas to close it. -Next, click a blank space somewhere in the canvas to deselect the top-row sprites. -Now drag-select (or SHIFT-click to select) the bottom-row labels, and in the popup Selection Bar, use `Layout …`. -Under Arrange Items, click "Distribute X", and under Position Selection, type `340` under `Y`, then click `Set Y`. Finally, under Align Selection, click "Center X". -Click the "Close" button at the bottom of the Layout popup, or just click in a blank area of the canvas to close it. +7. Click a blank space somewhere in the canvas to deselect the top-row sprites. + +8. Drag-to-select (or SHIFT-click to select each of) the bottom-row labels, and in the popup Selection Bar, use `Layout …`. + + - Under Arrange Items, click `Distribute X`. + - Under Position Selection, type `340` under `Y`, then click `Set Y`. + - Under Align Selection, click `Center X`. + - Click the "Close" button at the bottom of the Layout popup, or just click in a blank area of the canvas to close it.
-Figure 10. Ships and titles lined up - success check.
+Figure 8. Ships and titles lined up - success check.
Success check: - Each ship has one readable label above it. - Labels are visually aligned with the ships. -## 5. Attach the Movement Patterns +## Attach the Movement Patterns -Select each ship, open `Actions/Events`, and attach the movement pattern that matches its name. Build the patterns one ship at a time in the same scene-start event flow. +**OVERVIEW:** Select each ship, open `Actions/Events`, and attach the movement pattern that matches its name. -This is the slowest step of the tutorial. Work ship by ship rather than trying to author all seven flows at once. + - **NOTE:** The goal is to build the patterns one ship at a time in the same scene-start event flow. This is the slowest step of the tutorial. Work ship by ship rather than trying to author all seven flows at once.
-Figure 11. Actions/Events panel for authoring scene-start handlers and action steps.
+Figure 9. Actions/Events panel for authoring scene-start handlers and action steps.
-### 5a. Common Setup for Every Ship +### Common Setup for Every Ship -For each ship: +1. For each ship: -1. select the ship on the canvas or in the scene graph -2. open `Actions/Events` -3. create or open that ship's `Scene Start` handler -4. add the action steps described in the matching subsection below + - Select the ship on the canvas or in the scene graph. + - Open `Actions/Events`. + - Create or open that ship's `Scene Start` handler. + - Add the action steps described in the matching subsection below. -### 5b. Loop Templates You Will Reuse +### Loop Templates You Will Reuse You will use two loop templates repeatedly in this section: @@ -164,11 +187,11 @@ You will use two loop templates repeatedly in this section: When you use `Repeat with Children…`: -1. choose the number of children -2. choose the child type -3. leave `Count` blank if you want the pattern to repeat forever +1. Choose the number of children +2. Choose the child type +3. Leave `Count` blank if you want the pattern to repeat forever -### 5c. Wave +### Wave action Use the loop templates so you do not have to hand-build the nesting: @@ -194,13 +217,11 @@ Set the repeating `Wave` step to: - `startProgress = 0` - `endProgress = 1` -Figure 12 shows the `Wave` pattern inspector with the progress fields that are easiest to misread when entering the intro step values. -
-Figure 12. Wave pattern inspector with intro-step progress parameters.
+Figure 10. Wave pattern inspector with intro-step progress parameters.
-### 5d. Zigzag +### Zigzag action 1. click `+ Add…` 2. choose `Loops` @@ -229,7 +250,7 @@ Set the second `Zigzag Pattern` child to: - `velocity = 100` - `segments = 5` -### 5e. Figure-8 +### Figure-8 action 1. add `Repeat with Children…` 2. set `Children = 1` @@ -242,7 +263,7 @@ Set the `Figure-8 Pattern` child to: - `height = 60` - `velocity = 100` -### 5f. Orbit +### Orbit action Add a `Move To` step before the repeat so the ship starts on the orbit path. @@ -265,7 +286,7 @@ Set the `Orbit Pattern` child to: - `clockwise = true` - `centerMode = home` -### 5g. Spiral +### Spiral action 1. add `Repeat with Children…` 2. set `Children = 2` @@ -286,7 +307,7 @@ Set the second `Spiral Pattern` child to: - `velocity = 80` - `direction = inward` -### 5h. Bounce +### Bounce action Add a `Bounce Pattern` step and set: @@ -302,13 +323,11 @@ Then open the separate `Bounds` panel for the same ship and configure it: 4. set `± X Span = 50` 5. set `± Y Span = 60` -Figure 13 shows the `Bounce` pattern and its sibling `Bounds` panel in `Center/Span` mode. -
-Figure 13. Bounce pattern with the bounds helper in Center/Span mode.
+Figure 11. Bounce pattern with the bounds helper in Center/Span mode.
-### 5i. Patrol +### Patrol action Add a `Patrol Pattern` step and set: @@ -317,38 +336,29 @@ Add a `Patrol Pattern` step and set: Then open the separate `Bounds` panel for the same ship and configure it: -1. confirm `BoundsHit` is enabled -2. switch `Bounds` edit mode to `Center/Span` -3. use the prefilled center values for the selected ship -4. set `± X Span = 40` -5. set `± Y Span = 0` -7. switch back to `Min/Max` -8. set `minY = 400` -9. set `maxY = 500` - -Figure 14 shows the `Patrol` pattern after switching back to `Min/Max` so you can enter the final Y bounds. +1. Confirm `BoundsHit` is enabled +2. Switch `Bounds` edit mode to `Center/Span` +3. Set `± X Span = 40` +4. Set `± Y Span = 0` +5. Switch back to `Min/Max` +6. Set `minY = 400` +7. Set `maxY = 500`
-Figure 14. Patrol pattern with the final bounds values visible in Min/Max mode.
- -Practical order if you want the shortest learning path: - -1. Finish `Wave`, `Figure-8`, and `Spiral` first because they are the most direct. -2. Add `Zigzag` and `Orbit` next because they need setup steps before the repeating motion. -3. Finish with `Bounce` and `Patrol` because they also need bounds configuration. +Figure 12. Patrol pattern with the final bounds values visible in Min/Max mode.
Success check: - Every ship shows a handler/action flow in the editor. - `Bounce` and `Patrol` have their bounds configured, not just the pattern action itself. -## 6. Run the Demo in Play Mode +## Run the Demo in Play Mode -Toggle into Play mode with `Tab` or the toolbar button, and let the scene run long enough to verify all seven motions. Figure 15 shows the relevant toolbar area. +Toggle into Play mode with `Tab` or the toolbar button, and let the scene run long enough to verify all seven motions.
-Figure 15. Toolbar region with Play/Edit toggle and status controls.
+Figure 13. Toolbar region with Play/Edit toggle and status controls.
Look for these outcomes: diff --git a/docs/index.md b/docs/index.md index 82673f3..6bac7ec 100644 --- a/docs/index.md +++ b/docs/index.md @@ -16,3 +16,7 @@ This guide is the in-repo user guide for PhaserForge. It turns the current workf ## Troubleshooting - [GitHub Pages Publish Troubleshooting](./troubleshooting/github-pages-publish) + +## Music Credits +- [List](./reference/credits) + diff --git a/docs/reference/credits.md b/docs/reference/credits.md new file mode 100644 index 0000000..7c1f705 --- /dev/null +++ b/docs/reference/credits.md @@ -0,0 +1,26 @@ +Credits: + +- In Dreams by Scott Buckley | www.scottbuckley.com.au + + Music promoted by https://www.chosic.com/free-music/all/ + + Attribution 4.0 International (CC BY 4.0) + + https://creativecommons.org/licenses/by/4.0/ + +- Simulacra by Scott Buckley | www.scottbuckley.com.au + + Music promoted by https://www.chosic.com/free-music/all/ + + Creative Commons CC BY 4.0 + + https://creativecommons.org/licenses/by/4.0/ + +- The Soul-Crushing Monotony Of Isolation (Instrumental Mix) by Punch Deck | https://soundcloud.com/punch-deck + + Music promoted by https://www.chosic.com/free-music/all/ + + Creative Commons Attribution 3.0 Unported License + + https://creativecommons.org/licenses/by/3.0/deed.en_US + diff --git a/res/audio/Simulacra-chosic.com_.mp3 b/res/audio/Simulacra-chosic.com_.mp3 new file mode 100644 index 0000000..ab96119 Binary files /dev/null and b/res/audio/Simulacra-chosic.com_.mp3 differ diff --git a/res/audio/punch-deck-the-soul-crushing-monotony-of-isolation-instrumental-mix(chosic.com).mp3 b/res/audio/punch-deck-the-soul-crushing-monotony-of-isolation-instrumental-mix(chosic.com).mp3 new file mode 100644 index 0000000..64185a8 Binary files /dev/null and b/res/audio/punch-deck-the-soul-crushing-monotony-of-isolation-instrumental-mix(chosic.com).mp3 differ diff --git a/res/audio/sb_indreams(chosic.com).mp3 b/res/audio/sb_indreams(chosic.com).mp3 new file mode 100644 index 0000000..e69d661 Binary files /dev/null and b/res/audio/sb_indreams(chosic.com).mp3 differ diff --git a/src/editor/AssetsDock.tsx b/src/editor/AssetsDock.tsx index d82dc6f..bacde4e 100644 --- a/src/editor/AssetsDock.tsx +++ b/src/editor/AssetsDock.tsx @@ -2,15 +2,92 @@ import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react'; import type { ProjectSpec } from '../model/types'; import type { EditorAction, Selection } from './EditorStore'; import { getAssetReferences, type AssetKind } from './assetReferences'; +import { assetIdBaseFromOriginalName, getDemoPackAssetKind } from './demoPackAssets'; import { ASSET_DRAG_MIME } from './dragAssets'; import { fileToDataUrl } from './fileDataUrl'; import { loadImageMetadataFromFile, type LoadedImageMetadata } from './imageMetadata'; -const DEMO_PACK_IMAGES = import.meta.glob('../../res/images/*.png', { - eager: true, - query: '?url', - import: 'default', -}) as Record