update to remove game references

.gitignore

@@ -11,6 +11,6 @@ dist
 docs/build
 
 
-templates/template-game-web/public/assets
-templates/template-game-web/.assetpack
-templates/template-game-web/manifest.json
+templates/template-creation-web/public/assets
+templates/template-creation-web/.assetpack
+templates/template-creation-web/src/manifest.json

README.md

@@ -38,6 +38,8 @@ $ bun create pixi.js
 
 Then follow the prompts!
 
+### Advanced Usage
+
 You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a PixiJS + Vite project, run:
 
 ```bash
@@ -60,14 +62,7 @@ Currently supported template presets include:
 - `bundler-webpack`
 - `bundler-esbuild`
 - `bundler-import-map`
-
-We also have some additional templates that you can use for creating games for specific platforms:
-- `game-web`
-
-**Coming soon:**
-- `game-discord`
-- `game-facebook`
-- `game-youtube`
+- `creation-web`
 
 You can use `.` for the project name to scaffold in the current directory.
 

docs/docs/guide/games/_category_.yml → docs/docs/guide/creations/_category_.yml

@@ -1,3 +1,3 @@
-label: Games
+label: Creation Templates
 position: 1
 collapsed: false

docs/docs/guide/games/engine.mdx → docs/docs/guide/creations/engine.mdx

@@ -3,14 +3,14 @@ sidebar_position: 1
 title: Engine
 ---
 
-## Initializing the Game Engine
+## Initializing the Creation Engine
 
-To initialize the game engine, you need to create an instance of the GameEngine class and call its init method. This method sets up the PixiJS application, initializes the screen manager, and loads the necessary assets.
+To initialize the engine, you need to create an instance of the CreationEngine class and call its init method. This method sets up the PixiJS application, initializes the screen manager, and loads the necessary assets.
 
 ```ts
-import { GameEngine } from './engine/engine';
+import { CreationEngine } from './engine/engine';
 
-const engine = new GameEngine();
+const engine = new CreationEngine();
 
 (async () => {
     await engine.init({
@@ -22,7 +22,7 @@ const engine = new GameEngine();
 
 ## Handling Resizing
 
-The game engine automatically handles resizing of the application. The resize behavior can be customized by passing options to the init method.
+The engine automatically handles resizing of the application. The resize behavior can be customized by passing options to the init method.
 
 ```ts
 await engine.init({
@@ -36,13 +36,13 @@ await engine.init({
 
 ## Navigation & Screens
 
-The game engine provides a screen manager that allows you to manage different screens in your game. Each screen is a PixiJS Container that implements the Screen interface.
+The engine provides a screen manager that allows you to manage different screens in your application. Each screen is a PixiJS Container that implements the Screen interface.
 
 ```ts
 import { Container } from 'pixi.js';
 import { Screen } from './engine/navigation';
 
-export class GameScreen extends Container implements Screen {
+export class MyScreen extends Container implements Screen {
     /** Show the screen */
     show?(): Promise<void>;
     /** Hide the screen */
@@ -66,22 +66,22 @@ export class GameScreen extends Container implements Screen {
 }
 ```
 
-To show different screens in your game, you can use the `showScreen` method of the Navigation class. This method hides the current screen and presents a new screen.
+To show different screens in your app, you can use the `showScreen` method of the Navigation class. This method hides the current screen and presents a new screen.
 
 ```ts
-import { GameScreen } from './game/screens/game/GameScreen';
-import { LoadScreen } from './game/screens/LoadScreen';
+import { MainScreen } from './app/screens/main/MainScreen';
+import { LoadScreen } from './app/screens/LoadScreen';
 
 await engine.navigation.showScreen(LoadScreen);
-await engine.navigation.showScreen(GameScreen);
+await engine.navigation.showScreen(MainScreen);
 ```
 
 ### Popup Screens
 
 You can also show popup screens on top of the current screen. Popup screens are displayed in a separate layer above the main screen.
 
 ```ts
-import { PauseScreen } from './game/screens/PauseScreen';
+import { PauseScreen } from './app/screens/PauseScreen';
 
 await engine.navigation.presentPopup(PauseScreen);
 ```
@@ -94,29 +94,29 @@ await engine.navigation.dismissPopup();
 
 ### Asset Loading
 
-Using AssetPack you can define bundles of assets for your game. These bundles can be loaded individually to avoid loading all assets at once.
-Typically you would define a bundle for each screen in your game, and load them as needed.
+Using AssetPack you can define bundles of assets for your application. These bundles can be loaded individually to avoid loading all assets at once.
+Typically you would define a bundle for each screen in your application, and load them as needed.
 
 To help with this a screen can implements a `static assetBundles: string[]` property that defines the bundles required for that screen. The engine will automatically load these bundles when the screen is shown.
 
 ```ts
-export class GameScreen extends Container {
+export class MainScreen extends Container {
   /** Assets bundles required by this screen */
-  public static assetBundles = ["game"];
+  public static assetBundles = ["main"];
 
 }
 ```
 
 ## Audio
 
-The game engine includes built-in support for managing background music (bgm) and sound effects (sfx). You can control audio playback using the `bgm` and `sfx` properties of the `GameEngine`.
+The engine includes built-in support for managing background music (bgm) and sound effects (sfx). You can control audio playback using the `audio` property on the `CreationEngine`.
 
 ```ts
 // Play background music
-engine.bgm.play('background-music.mp3', { volume: 0.5 });
+engine.audio.bgm.play('background-music.mp3', { volume: 0.5 });
 
 // Play sound effect
-engine.sfx.play('explosion.mp3', { volume: 0.8 });
+engine.audio.sfx.play('explosion.mp3', { volume: 0.8 });
 ```
 
 ### Background Music (bgm)
@@ -129,13 +129,13 @@ Handles short sound special effects, mainly for having its own volume settings.
 While you can control the volume of each audio type, you can also control the global volume of all audio the exposed global volume functions
 
 ```ts
-engine.setMasterVolume(0.5);
-const volume = engine.getMasterVolume();
+engine.audio.setMasterVolume(0.5);
+const volume = engine.audio.getMasterVolume();
 ```
 
 ## Utility Functions
 
-The game engine provides several utility functions for common tasks, such as calculating distances, interpolating values, and generating random numbers.
+The engine provides several utility functions for common tasks, such as calculating distances, interpolating values, and generating random numbers.
 
 This is not an exhaustive list, but here are some examples:
 

docs/docs/guide/creations/intro.md

@@ -0,0 +1,52 @@
+---
+sidebar_position: 0
+title: Getting Started
+---
+
+We have put together a simple "creation template" that takes advantage of the PixiJS ecosystem to help you get started with building web-based applications.
+
+This template provides a solid foundation for a variety of applications, including game development. It includes essential features such as screen management, audio, and resize handling. It is designed to streamline your development process and make it easier for you to create engaging web based content. While it is not a full-fledged "game engine", we hope that it will help you get started quickly and build amazing content.
+
+## Overview
+
+The creation template is built on top of PixiJS, as well as other libraries in the PixiJS ecosystem. Lets take a quick look at the technologies used in the template:
+
+- **[PixiJS](https://github.com/pixijs/pixijs)**: A powerful 2D rendering engine that provides a fast and flexible rendering pipeline for creating games and interactive applications.
+- **[AssetPack](https://github.com/pixijs/assetpack)**: A library for managing assets in PixiJS applications. It simplifies the creation of assets such as images, sounds, and spritesheets.
+- **[PixiJS UI](https://github.com/pixijs/ui)**: A library that contains commonly used UI components, that are extensible to allow them to be used in any project
+- **[PixiJS Sound](https://github.com/pixijs/sound)**: A WebAudio API playback library, with filters. Modern audio playback for modern browsers.
+- **[Vite](https://vitejs.dev/)**: A fast and lightweight build tool that provides instant server start-up. It is used to build and run the project.
+
+We highly recommend that you familiarize yourself with these libraries to get the most out of the creation template
+
+### Additional Libraries
+
+- **[Spine](https://github.com/EsotericSoftware/spine-runtimes)**: A 2D skeletal animation tool that allows you to create animations for games and other interactive applications. The game template includes support for Spine animations.
+- **[motion](https://motion.dev/)**: A simple and powerful tweening library. It allows you to create smooth animations and transitions with minimal code.
+
+## Creation Engine
+
+Included in the template is a simple "creation engine" that provides a set of features to help you build your application. The engine provides features that new users typically struggle with such as screen management, asset loading, audio playback.
+
+You can find more information about the engine in the [Engine Guide](/docs/guide/creations/engine).
+
+
+## Template Types
+
+We are slowly building up templates to help you build a game for different platforms. Currently, we have the following templates:
+
+- **Web**: A general template for building web-based applications.
+
+**Coming Soon**:
+- **[Discord](https://github.com/discord/embedded-app-sdk)**: A multiplayer template for building applications that can be run on the Discord platform.
+- **[Facebook](https://www.facebook.com/fbgaminghome/developers)**: A template for building applications that can be run on the Facebook instant games platform.
+- **[YouTube](https://developers.google.com/youtube/gaming/playables/reference/sdk)**: A template for building applications that can be run on the YouTube Playables platform.
+
+
+You can find the specific documentation for each template in the sidebar.
+
+## More Examples?
+
+If you are looking for more examples, you can check out the [Open Games](https://github.com/pixijs/open-games) repo. It contains a collection of open-source games built with PixiJS that you can use as a reference for your own projects.
+
+These examples use the same tech stack as the game template, however, these where built before this tool was created, so there are some differences to be aware of.

docs/docs/guide/installation.mdx

@@ -1,6 +1,6 @@
 ---
 sidebar_position: 0
-title: Installation
+title: Getting Started
 ---
 
 :::info **Compatibility Note**
@@ -33,6 +33,39 @@ bun create pixi.js
 
 Then follow the prompts!
 
+## Bundler Templates
+
+Bundler templates are general templates that you can use to scaffold a PixiJS project with a specific bundler.
+They include the necessary configurations and dependencies to get you started however they are not particularly opinionated about the project structure.
+
+Currently supported template presets include:
+
+- **[Vite](https://vite.dev)** + PixiJS (Recommended)
+- **[Webpack](https://webpack.js.org/)** + PixiJS
+- **[esbuild](https://esbuild.github.io/)** + PixiJS
+- PixiJS imported via **[import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)**
+
+## Creation Templates (Recommended)
+
+We have created some additional templates that you can use for creating projects for specific platforms.
+These templates include additional configurations and dependencies to help you get started with your app development.
+As such they are more opinionated than the general bundler templates.
+
+The goal of these templates is to provide a more tailored experience for developers who are less experienced with setting up a PixiJS project from scratch.
+
+Find out more about these templates in the [Creation Template](/docs/guide/creations/intro) section.
+
+Currently supported creation templates include:
+- Web: A general template for building web-based applications.
+
+**Coming soon:**
+- **[Discord](https://github.com/discord/embedded-app-sdk)**: A multiplayer template for building applications that can be run on the Discord platform.
+- **[Facebook](https://www.facebook.com/fbgaminghome/developers)**: A template for building applications that can be run on the Facebook instant games platform.
+- **[YouTube](https://developers.google.com/youtube/gaming/playables/reference/sdk)**: A template for building applications that can be run on the YouTube Playables platform.
+
+
+## Advanced Usage
+
 You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a PixiJS + Vite project, run:
 
 ```bash
@@ -51,28 +84,13 @@ bun create pixi.js pixi-project --template bundler-vite
 
 You can use `.` for the project name to scaffold in the current directory.
 
-### Templates
-
-Currently supported template presets include:
+### Template List
 
 - `bundler-vite`
 - `bundler-webpack`
 - `bundler-esbuild`
 - `bundler-import-map`
-
-### Games
-
-We also have some additional templates that you can use for creating games for specific platforms:
-- `game-web`
-
-**Coming soon:**
-- `game-discord`
-- `game-facebook`
-- `game-youtube`
-
-These templates include additional configurations and dependencies to help you get started with your game development. As such they are more opinionated than the general bundler templates.
-
-Find out more about the templates in the [Games](/docs/guide/games/intro) section.
+- `creation-web`
 
 ## License
 

docs/src/pages/index.tsx

@@ -51,6 +51,17 @@ export default function Home(): JSX.Element {
             padding: 20,
           }}
         >
+          <img
+            src="/create-pixi/img/demo.gif"
+            alt="Demo GIF"
+            style={{
+              width: "100%",
+              maxWidth: 800,
+              marginBottom: 20,
+              borderRadius: 10, // Add this line for rounded borders
+              border: "2px solid #676767", // Optional: Add a border
+            }}
+          />
           <p>With NPM:</p>
           <pre>
             <code>npm create pixi.js@latest</code>