pixijs · bbazukun123 · Dec 1, 2023
diff --git a/versioned_docs/version-7.x/branding.md b/versioned_docs/version-7.x/branding.md
@@ -0,0 +1,68 @@
+# Branding
+
+Below are links to assorted PixiJS branding assets usable for including on your site, game, or app. All assets here are free-to-use. If you have any questions or requests, please [file an issue](https://github.com/pixijs/pixijs.com/issues/new).
+
+## Banner
+
+This is the banner that is displayed at the top of our [README](https://github.com/pixijs/pixijs/blob/dev/README.md).
+
+![PixiJS Banner](https://files.pixijs.download/branding/pixijs-banner.png)
+
+## Logo
+
+We recommend using the Logo in places where the audience may not be familiar with PixiJS. 
+
+### Logo (Dark)
+
+Download: [SVG](https://files.pixijs.download/branding/pixijs-logo-full-dark.svg)
+[PNG](https://files.pixijs.download/branding/pixijs-logo-full-dark.png)
+
+![PixiJS Logo Full Dark](https://files.pixijs.download/branding/pixijs-logo-full-dark.png)
+
+### Logo (Dark, Transparent)
+
+Download: [SVG](https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg)
+[PNG](https://files.pixijs.download/branding/pixijs-logo-transparent-dark.png)
+
+![PixiJS Logo Full Dark](https://files.pixijs.download/branding/pixijs-logo-transparent-dark.png)
+
+### Logo (Pink)
+
+Download: [SVG](https://files.pixijs.download/branding/pixijs-logo-full-light.svg)
+[PNG](https://files.pixijs.download/branding/pixijs-logo-full-light.png)
+
+![PixiJS Logo Full Light](https://files.pixijs.download/branding/pixijs-logo-full-light.png)
+
+### Logo (Pink, Transparent)
+
+Download: [SVG](https://files.pixijs.download/branding/pixijs-logo-transparent-light.svg)
+[PNG](https://files.pixijs.download/branding/pixijs-logo-transparent-light.png)
+
+![PixiJS Logo Full Light](https://files.pixijs.download/branding/pixijs-logo-transparent-light.png)
+
+## Mark
+
+We recommend using the Mark in places where the audience is someone familiar with the ecosystem, such as PixiJS Discord users, plugin authors, social media followers.
+
+### Mark (Pink, Large)
+
+512px x 512px 
+
+Download: [SVG](https://files.pixijs.download/branding/pixijs-logo.svg)
+[PNG](https://files.pixijs.download/branding/pixijs-logo.png)
+
+![PixiJS Logo Full Dark](https://files.pixijs.download/branding/pixijs-logo.png)
+
+### Mark (Pink)
+
+Download: [SVG](https://files.pixijs.download/branding/pixijs-logo-mark-dark.svg)
+[PNG](https://files.pixijs.download/branding/pixijs-logo-mark-dark.png)
+
+![PixiJS Logo Mark Dark](https://files.pixijs.download/branding/pixijs-logo-mark-dark.png)
+
+### Mark (Light)
+
+Download: [SVG](https://files.pixijs.download/branding/pixijs-logo-mark-light.svg)
+[PNG](https://files.pixijs.download/branding/pixijs-logo-mark-light.png)
+
+![PixiJS Logo Mark Light](https://files.pixijs.download/branding/pixijs-logo-mark-light.png)
diff --git a/versioned_docs/version-7.x/examples/index.md b/versioned_docs/version-7.x/examples/index.md
@@ -0,0 +1,17 @@
+---
+hide_table_of_contents: true
+sidebar_position: 0
+---
+
+# Examples
+
+Welcome to the PixiJS Examples page! Here you can find a variety of demos and code snippets to help you get started with PixiJS.
+
+Check out some of our featured examples below:
+
+- [Basic Container](./basic/container.md)
+- [Blend Modes](./basic/blend-modes.md)
+- [Tiling Sprite](./sprite/tiling-sprite.md)
+- [Animated Sprite](./sprite/animated-sprite-jet.md)
+- [Text](./text/pixi-text.md)
+- [Graphics](./graphics/simple.md)
diff --git a/versioned_docs/version-7.x/faq.md b/versioned_docs/version-7.x/faq.md
@@ -0,0 +1,40 @@
+# FAQ
+
+## What is PixiJS for?
+
+Everything! Pixi.js is a rendering library that will allow you to create rich, 
+interactive graphic experiences, cross-platform applications, and games without 
+having to dive into the WebGL API or grapple with the intricacies of browser and 
+device compatibility. Killer performance with a clean API, means not only will 
+your content be better - but also faster to build!
+
+## Is PixiJS free?
+
+PixiJS is and always will be free and Open Source. That said, financial contributions 
+are what make it possible to push PixiJS further, faster. Contributions allow us to 
+commission the PixiJS developer community to accelerate feature development and create
+more in-depth documentation. <a href="https://opencollective.com/pixijs" target="_blank">Support Us</a> by making a contribution via <a href="https://opencollective.com/pixijs" target="_blank">Open Collective</a>. Go on! It will be a massive help AND make you feel good about yourself, win win ;)
+
+## Where do I get it?
+
+Visit our GitHub page to download the very latest version of PixiJS. This is the most up-to-date resource for PixiJS and should always be your first port of call to make sure you are using the latest version. Just click the 'Download' link in the navigation.
+
+## How do I get started?
+
+Right here! Take a look through the Resources section for a wealth of information including documentation, forums, tutorials and the Goodboy blog.
+
+## Why should I use PixiJS?
+
+Because you care about speed. PixiJS' #1 mantra has always been speed. We really do feel the need! We do everything we can to make PixiJS as streamlined, efficient and fast as possible, whilst balancing it with offering as many crucial and valuable features as we can.
+
+## Is PixiJS a game engine?
+
+No. PixiJS is what we've come to think of as a "creation engine". Whilst it is extremely good for making games, the core essence of PixiJS is simply moving things around on screens as quickly and efficiently as possible. It does of course happen that it is absolutely brilliant for making games though!
+
+## Who makes PixiJS?
+
+Outside of the highly active PixiJS community, it is primarily maintained by Mat Groves, Technical Partner of our creative agency Goodboy Digital. One of the huge advantages of creating PixiJS within the framework of a working agency is that it means its features are always driven by genuine industry demands and critically are always trialled "in anger" in our cutting-edge games, sites and apps.
+
+## I found a bug. What should I do?
+
+Two things - lets us know via the <a href="https://github.com/pixijs/pixijs/issues/new">PixiJS GitHub community</a> and even better yet, if you know how, post a fix! Our Community is stronger in numbers so we're always keen to welcome new contributors into the team to help us shape what PixiJS becomes next.
diff --git a/versioned_docs/version-7.x/guides/basics/architecture-overview.md b/versioned_docs/version-7.x/guides/basics/architecture-overview.md
@@ -0,0 +1,25 @@
+# Architecture Overview
+
+OK, now that you've gotten a feel for how easy it is to build a PixiJS application, let's get into the specifics.  For the rest of the Basics section, we're going to work from the high level down to the details.  We'll start with an overview of how PixiJS is put together.
+
+## The Code
+
+Before we get into how the code is layed out, let's talk about where it lives.  PixiJS is an open source product hosted on [GitHub](https://github.com/pixijs/pixijs).  Like any GitHub repo, you can browse and download the raw source files for each PixiJS class, as well as search existing issues & bugs, and even submit your own.  PixiJS is written in a JavaScript variant called [TypeScript](https://www.typescriptlang.org), which enables type-checking in JavaScript via a pre-compile step.
+
+## The Components
+
+PixiJS is a modular rendering engine.  Each task required for generating, updating and displaying content is broken out into its own component.  Not only does this make the code cleaner, it allows for greater extensibility.  Additionally, with the use of the [PixiJS Customize tool](https://pixijs.io/customize/), it's possible to build a custom PixiJS file containing only the subset of features your project needs, saving download size.
+
+Here's a list of the major components that make up PixiJS.  Note that this list isn't exhaustive.  Additionally, don't worry too much about how each component works.  The goal here is to give you a feel for what's under the hood as we start exploring the engine.
+
+### Major Components
+
+| Component                                  | Description                                                                                                                                                                                            |
+| ---                                        | ---                                                                                                                                                                                                    |
+| **Renderer** `@pixi/core`                  | The core of the PixiJS system is the renderer, which displays the scene graph and draws it to the screen.  The default renderer for PixiJS is based on WebGL under the hood.                           |
+| **Container** `@pixi/display`              | Main display object which creates a scene graph: the tree of renderable objects to be displayed, such as sprites, graphics and text. See [Scene Graph](scene-graph) for more details.             |
+| **Loader** `@pixi/loader`                  | The loader system provides tools for asynchronously loading resources such as images and audio files.                                                                                                  |
+| **Ticker** `@pixi/ticker`                  | Tickers provide periodic callbacks based on a clock.  Your game update logic will generally be run in response to a tick once per frame.  You can have multiple tickers in use at one time.            |
+| **Application** `@pixi/app`                | The Application is a simple helper that wraps a Loader, Ticker and Renderer into a single, convenient easy-to-use object. Great for getting started quickly, prototyping and building simple projects. |
+| **Interaction** `@pixi/interaction`        | PixiJS supports both touch and mouse-based interaction - making objects clickable, firing hover events, etc.                                                                                           |
+| **Accessibility** `@pixi/accessibility`    | Woven through our display system is a rich set of tools for enabling keyboard and screen-reader accessibility.                                                                                         |
diff --git a/versioned_docs/version-7.x/guides/basics/getting-started.md b/versioned_docs/version-7.x/guides/basics/getting-started.md
@@ -0,0 +1,176 @@
+# Getting Started
+
+In this section we're going to build the simplest possible PixiJS application.  In doing so, we'll walk through the basics of how to build and serve the code.
+
+### Advanced Users
+
+A quick note before we start: this guide is aimed at beginning PixiJS developers who have minimal
+experience developing JavaScript-based applications.  If you are a coding veteran, you may find that
+the level of detail here is not helpful. If that's the case, you may want to skim this guide, then
+jump into [how to work with PixiJS and packers](#TODO) like webpack and npm.
+
+### A Note About JavaScript
+
+One final note.  The JavaScript universe is currently in transition from old-school JavaScript (ES5) to the newer ES6 flavor:
+
+```javascript
+// ES5
+var x = 5;
+setTimeout(function() { alert(x); }, 1000);
+// ES6
+const x = 5;
+setTimeout(() => alert(x), 1000);
+```
+
+ES6 brings a number of major advantages in terms of clearer syntax, better variable scoping, native class support, etc.  By now, all major browsers support it.  Given this, our examples in these guides will use ES6.  This doesn't mean you can't use PixiJS with ES5 programs!  Just mentally substitute "var" for "let/const", expand the shorter function-passing syntax, and everything will run just fine.
+
+### Components of a PixiJS Application
+
+OK!  With those notes out of the way, let's get started.  There are only a few steps required to write a PixiJS application:
+
+* Create an HTML file
+* Serve the file with a web server
+* Load the PixiJS library
+* Create an [Application](https://pixijs.download/release/docs/PIXI.Application.html)
+* Add the generated view to the DOM
+* Add an image to the stage
+* Write an update loop
+
+Let's walk through them together.
+
+### The HTML File
+
+PixiJS is a JavaScript library that runs in a web page.  So the first thing we're going to need is some HTML in a file.  In a real PixiJS application, you might want to embed your display within a complex existing page, or you might want your display area to fill the whole page.  For this demo, we'll build an empty page to start:
+
+```html
+<!doctype html>
+<html>
+  <head>
+  </head>
+  <body>
+    <h1>Hello PixiJS</h1>
+  </body>
+</html>
+```
+
+Create a new folder named `pixi-test`, then copy and paste this HTML into a new file in the `pixi-test` folder named `index.html`.
+
+### Serving the File
+
+You will need to run a web server to develop locally with PixiJS.  Web browsers prevent loading local files (such as images and audio files) on locally loaded web pages.  If you just double-click your new HTML file, you'll get an error when you try to add a sprite to the PixiJS stage.
+
+Running a web server sounds complex and difficult, but it turns out there are a number of simple web servers that will serve this purpose.  For this guide, we're going to be working with [Mongoose](https://mongoose.ws), but you could just as easily use [XAMPP](https://www.apachefriends.org/download.html) or the [http-server Node.js package](https://www.npmjs.com/package/http-server) to serve your files.
+
+To start serving your page with Mongoose, go to [the Mongoose download page](https://mongoose.ws) and download the free server for your operating system.   Mongoose defaults to serving the files in the folder it's run in, so copy the downloaded executable into the folder you created in the prior step (`pixi-test`).  Double-click the executable, tell your operating system that you trust the file to run, and you'll have a running web server, serving your new folder.
+
+Test that everything is working by opening your browser of choice and entering `http://127.0.0.1:8080` in the location bar.  (Mongoose by default serves files on port 8080.)  You should see "Hello PixiJS" and nothing else.  If you get an error at this step, it means you didn't name your file `index.html` or you mis-configured your web server.
+
+### Loading PixiJS
+
+OK, so we have a web page, and we're serving it.  But it's empty.  The next step is to actually load the PixiJS library.  If we were building a real application, we'd want to download a target version of PixiJS from the [Pixi Github repo](https://github.com/pixijs/pixijs) so that our version wouldn't change on us.  But for this sample application, we'll just use the CDN version of PixiJS.  Add this line to the `<head>` section of your `index.html` file:
+
+```html
+<script src="https://pixijs.download/release/pixi.js"></script>
+```
+
+This will include a *non-minified* version of the latest version of PixiJS when your page loads, ready to be used.  We use the non-minified version because we're in development.  In production, you'd want to use `pixi.min.js` instead, which is compressed for faster download and excludes assertions and deprecation warnings that can help when building your project, but take longer to download and run.
+
+### Creating an Application
+
+Loading the library doesn't do much good if we don't *use* it, so the next step is to start up PixiJS.  Start by replacing the line `<h1>Hello PixiJS</h1>` with a script tag like so:
+
+```html
+<script>
+  let app = new PIXI.Application({ width: 640, height: 360 });
+</script>
+```
+
+What we're doing here is adding a JavaScript code block, and in that block creating a new PIXI.Application instance. [Application](https://pixijs.download/release/docs/PIXI.Application.html) is a helper class that simplifies working with PixiJS.  It creates the renderer, creates the stage, and starts a ticker for updating.  In production, you'll almost certainly want to do these steps yourself for added customization and control - we'll cover doing so in a later guide.  For now, the Application class is a perfect way to start playing with PixiJS without worrying about the details.
+
+### Adding the View to the DOM
+
+When the PIXI.Application class creates the renderer, it builds a Canvas element that it will render *to*.  In order to see what we draw with PixiJS, we need to add this Canvas element to the web page's DOM.  Append the following line to your page's script block:
+
+```JavaScript
+  document.body.appendChild(app.view);
+```
+
+This takes the view created by the application (the Canvas element) and adds it to the body of your page.
+
+### Creating a Sprite
+
+So far all we've been doing is prep work.  We haven't actually told PixiJS to draw anything.  Let's fix that by adding an image to be displayed.
+
+There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/release/docs/PIXI.Sprite.html).  We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [DisplayObjects](https://pixijs.download/release/docs/PIXI.DisplayObject.html).  A Sprite is a type of DisplayObject that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth.
+
+Before PixiJS can render an image, it needs to be loaded.  Just like in any web page, image loading happens asynchronously.  We'll talk a lot more about resource loading in later guides.  For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us:
+
+```JavaScript
+  // Magically load the PNG asynchronously
+  let sprite = PIXI.Sprite.from('sample.png');
+```
+
+[Download the sample PNG here](/images/sample.png), and save it into your `pixi-test` directory next to your `index.html`.
+
+### Adding the Sprite to the Stage
+
+Finally, we need to add our new sprite to the stage.  The stage is simply a [Container](https://pixijs.download/release/docs/PIXI.Container.html) that is the root of the scene graph.  Every child of the stage container will be rendered every frame.  By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it.
+
+```JavaScript
+  app.stage.addChild(sprite);
+```
+
+### Writing an Update Loop
+
+While you _can_ use PixiJS for static content, for most projects you'll want to add animation.  Our sample app is actually cranking away, rendering the same sprite in the same place multiple times a second.  All we have to do to make the image move is to update its attributes once per frame.  To do this, we want to hook into the application's _ticker_.  A ticker is a PixiJS object that runs one or more callbacks each frame.  Doing so is surprisingly easy.  Add the following to the end of your script block:
+
+```javascript
+  // Add a variable to count up the seconds our demo has been running
+  let elapsed = 0.0;
+  // Tell our application's ticker to run a new callback every frame, passing
+  // in the amount of time that has passed since the last tick
+  app.ticker.add((delta) => {
+    // Add the time to our total elapsed time
+    elapsed += delta;
+    // Update the sprite's X position based on the cosine of our elapsed time.  We divide
+    // by 50 to slow the animation down a bit...
+    sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
+  });
+```
+
+All you need to do is to call `app.ticker.add(...)`, pass it a callback function, and then update your scene in that function.  It will get called every frame, and you can move, rotate etc. whatever you'd like to drive your project's animations.
+
+### Putting It All Together
+
+That's it!  The simplest PixiJS project!
+
+Here's the whole thing in one place.  Check your file and make sure it matches if you're getting errors.
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <script src="https://pixijs.download/release/pixi.min.js"></script>
+  </head>
+  <body>
+    <script>
+      // Create the application helper and add its render target to the page
+      let app = new PIXI.Application({ width: 640, height: 360 });
+      document.body.appendChild(app.view);
+
+      // Create the sprite and add it to the stage
+      let sprite = PIXI.Sprite.from('sample.png');
+      app.stage.addChild(sprite);
+
+      // Add a ticker callback to move the sprite back and forth
+      let elapsed = 0.0;
+      app.ticker.add((delta) => {
+        elapsed += delta;
+        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
+      });
+    </script>
+  </body>
+</html>
+```
+
+Once you have things working, the next thing to do is to read through the rest of the Basics guides to dig into how all this works in much greater depth.