Giter Site home page Giter Site logo

pixijs.com's Introduction

Website

This website is built using Docusaurus 2, a modern static website generator.

Installation

$ npm i

Local Development

$ npm start

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

Build

$ npm build

This command generates static content into the build directory and can be served using any static contents hosting service.

Working with Content

Core content on the website is within the working docs directory and can have various versions that were snapshot and copied over into the versioned_docs directory.

Core content consists of:

  • Guides
  • Examples
  • Tutorials

Guides

These are static markdown pages that can be added and edited directly within the docs/guides directory.

Examples

These are markdown compilations of the JS files on the src/examples directory. They are also versioned to match the versions of the docs snapshots. If the exact version of the example is not found, it will fallback to the best-matched most recent version of the examples. be Only the docs/examples/index.md entry point can be altered, but the examples themselves should be worked on from within the src/examples/{version} directories. Once updated, the command below can be called to generate out the markdown compilations of the examples.

$ npm run generate-example-docs

This command will trigger example markdowns generation on all of the docs directories altogether, both the working docs directory and the versioned docs directories.

Note: The examples within the docs version active on the website will be shown on the drop-down menu on the Playground page to serve as starting points for users to explore PixiJS features to their heart's content

Tutorials

These also markdown compilations of groups of files on the src/tutorials directory. Each tutorial group consists of a number of steps where each step contains a JS code file accompanied by an instruction markdown file, and a separate completed JS code file if there is a next step to proceed towards. These completed code can be toggled on/off from the instruction card of the corresponded step. Like the examples, these are also versioned to match the versions of the docs snapshots and will fallback to the best-matched most recent version of the tutorials if the exact version is not found. Only the docs/tutorials/index.md entry point can be altered, but the tutorial groups themselves should be worked on from within the src/tutorial/{version} directories. Once updated, the command below can be called to generate out the markdown compilations of the tutorial groups.

$ npm run generate-tutorial-docs

This command will trigger tutorial markdowns generation on all of the docs directories altogether, both the working docs directory and the versioned docs directories.

Workflow

$ npm start

The local development command will also trigger the generate-content command which, in turns, calls the generate-example-docs script and generate-tutorial-docs script respectively. Since the compiled markdown pages contain dynamic components, changes within the examples source or the tutorials source will be reflected on hot reloads.

However, when adding or removing tutorials or examples, please make sure to re-do npm start or run generate-content manually to keep the markdown pages of these content up-to-date.

Versioning

Docs versioning is native to Docusaurus, but to make it easier to manage it is coupled with the PixiJS version. A pixi-version.json is required on the working docs directory to create a versioned snapshot of the docs. This can be generated and altered using the following command:

$ npm run generate-pixi-version-config

The command will retrieve the up-to-date versions and tags from PixiJS and display out as an interactive list for selection.

Once satisfied with the state of the working docs and wanting to create a snapshot to make way for another upcoming version, the following command can be called:

$ npm run create-docs-version-snapshot

This will copy everything from the working docs into its own directory within the versioned_docs directory and named correspondingly to the version number from the encapsulated pixi-version.json, if chosen to be created as a specific version snapshot. If chosen to be snapshot as a generic version then the version key will be simplified to {major}.x (eg. 7.x). Generic version snapshot is recommended over the specific one for maintaining major docs, but for a major version where multiple versions of docs are needed then the ability to create specific version snapshots can be handy. The command will also trigger update-global-version-config script which adds the pixi version config to the master pixi-versions.json on the root and alter the version config on the docusaurus.config.js accordingly. Docusaurus will also add the version to its versions.json file on the root.

An existing docs snapshot can be removed using the following command:

$ npm run remove-docs-version-snapshot

Or can have its pixi version config altered to another version using the command:

$ npm run switch-snapshot-pixi-version-config

where both come with an interactive list of all the snapshots for selection to be actioned on accordingly.

The update-pixi-version-configs script is also called pre-build and pre-deploy to update all the outdated labels or metadata on the pixi-version.json config on all the docs directories.

pixijs.com's People

Contributors

3mdistal avatar aduros-alt avatar archiloque avatar baseten avatar bbazukun123 avatar bigtimebuddy avatar ccarrster avatar chriscoastal avatar creativoma avatar cyberdex avatar eduardpeters avatar elsassph avatar f-star avatar ganevdev avatar goodboydigital avatar javitrek avatar jcpurger avatar kasztan2 avatar korve avatar naramdash avatar protofarer avatar sawyerpollard avatar supersodasea avatar thalys avatar tisilent avatar vikpe avatar zyie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

pixijs.com's Issues

"Getting Started" page 1 has invalid code for creating a new Application

Currently, on page 1 of the "Getting Started" guide, the following code is listed for creating a new PIXI Application:

// Create a PixiJS application of type canvas with specify background color and make it resize to the iframe window
const app = new PIXI.Application() < HTMLCanvasElement > { background: '#1099bb', resizeTo: window };

This code will not run, and was likely meant to be something more like this:

// Create a PixiJS application of type canvas with specify background color and make it resize to the iframe window
const app = new PIXI.Application<HTMLCanvasElement>({ background: '#1099bb', resizeTo: window });

Bug: RenderTexture Container does not render / behavior for v6 is different to v7

Current Behavior

It would seem that RenderTexture no longer renders a container correctly from v7 onwards.

https://pixijs.com/playground?exampleId=textures.renderTextureBasic

image

Expected Behavior

In v6 this used to render correctly.

https://pixijs.com/playground?exampleId=textures.renderTextureBasic&pixiVersion=6.5.10

image

Steps to Reproduce

https://pixijs.com/playground?exampleId=textures.renderTextureBasic

Environment

  • pixi.js version: e.g. 7.1.0
  • Browser & Version: e.g. Chrome 108
  • OS & Version: e.g. Ubuntu 22.04
  • Running Example: e.g. https://pixiplayground.com/

Possible Solution

No response

Additional Information

No response

Show PixiJS version in docs header

Description of the problem

I often find myself googling the PixiJS documentation for something like Sprite or Application. The problem is these links are often for random versions. Whilst I am reading them, I have no idea which version I am reading (I have to check the URL).
Google search of PixiJS sprite documentation

Suggestion to fix the problem

Add a select menu in the header for the PixiJS version. This solves two problems:

  • it is easy to discover which version of the docs you are viewing, and catch yourself if you are mistakenly looking at the wrong version!
  • allows users to quickly navigate to their desired PixiJS version once they discover they are looking at the wrong one
Before After (mockup)
Screenshot 2024-03-11 at 16 21 50 Screenshot 2024-03-11 at 16 21 31

Bug: Search does not work correctly

Known issues

  • Does not appear to be able to search the guides
  • Doesn't seem to be getting everything from the API docs. For example typing hello should result in the sayHello function appearing as a result
  • Pressing the see all results button does not provide any results

Set up automation to deploy site when pixi PR's are merged

When a PR has been merged into the dev branch of pixi we want to regenerate our docs

Release cycle

When a new release is made we want to version the docs, keeping the last 2 stable versions e.g.

  • Pixi updates to 7.3.0
  • dev version is updated
  • 7.3.x is created on the site
  • 7.1.x is removed
  • This leaves dev, 7.3.x, 7.2.x

Alternative example:

  • Pixi updates to 7.3.1
  • dev version is updated
  • 7.3.x is updated
  • This leaves dev, 7.3.x, 7.2.x`

We can try implementing repository-dispatch events to get notified when something inside pixi changes

Generating the docs

On the pixi repo there is the chore/docusaurus-docs branch that has a npm run docs:webdoc-docusaurus which will generate the docs into the docusaurus folder so you can use this to copy over the docs

We also have a npm run write-versions script in the website repo that will get the latest versions of pixi

Feature Request: Improvement of v7 migration guide (Replaces Loader with Assets)

Description

Not really a feature request, more just a suggestion to consider improving an area of the docs.

In the Replaces Loader with Assets of the v7 migration docs, the example "from" and "to" dont really give a like-for-like comparison. The concept of adding resources to the loader before loading them appears to no longer exist, and the docs doesnt really highlight the alternative approach to use.

I'm assuming that given the old approach of:

import { Loader, Sprite } from 'pixi.js';

const loader = new Loader();
loader.add('background1', 'path/to/assets/background1.jpg');
loader.add('background2', 'path/to/assets/background2.jpg');
loader.load((loader, resources) => {
  const image = Sprite.from(resources.background.texture);
});

The new approach would be:

import { Assets, Sprite } from 'pixi.js';

const texture1 = await Assets.load('path/to/assets/background1.jpg');
const image1 = Sprite.from(texture1);

const texture2 = await Assets.load('path/to/assets/background2.jpg');
const image2 = Sprite.from(texture2);

Is this assumption correct?

If so, I think it would be useful to include this in the docs. If not, then the docs should deffo be improved here as the alternative approach in v7 is not clear.

Bug: Mouse Trail example not working

Current Behavior

Expected Behavior

  • Expected to see the working demo.

Steps to Reproduce

Open the mouse trail example: https://pixijs.com/examples/advanced/mouse-trail

Environment

I know that's not specific versions, but I think this is more likely a lower-level issue, or a small issue with the example itself.

Possible Solution

No response

Additional Information

No response

Video Bug

For a video sprite, I was using .play() and .pause(). I had to separate videos displaying, yet they were both playing and pausing when they weren't supposed to. I realised that they had the same src and that's why. The code shouldn't base it on the src, rather then the video ID.

thanks

Playground Updates

  • Add ability to select an example from a drop down menu
  • Add ability to select version of pixi from drop down menu
  • Fix the fullscreen styling as current implementation is a hack
  • Remove typescript from examples
  • Find a way to get the playground working with imports instead of using the global PIXI object
    • This may be difficult because of the way pixi is currently set up. We do not upload non PIXI files to our site
    • We may need to modify pixi to allow for this but then it makes it difficult to swap between versions
    • Maybe the import * as PIXI from 'pixi.js' is the way to go. Then on older versions we comment out that line and use the global PIXI object

Bug: Examples and playground errors

I am using Firefox 111.0 (64-bit).
There are errors in console when going to https://beta.pixijs.com/examples/basic/cacheasbitmap, for example.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.cloudflareinsights.com/beacon.min.js/vaafb692b2aea4879b33c060e79fe94621666317369993. (Reason: CORS request did not succeed). Status code: (null).

None of the “sha512” hashes in the integrity attribute match the content of the subresource. (1-18-0-sandpack.codesandbox.io)

Uncaught DOMException: The operation is insecure. (browserfs.min.js:7)

Uncaught ReferenceError: BrowserFS is not defined

Uncaught (in promise) Error: No available storage method found.

There are red error instead of playground display Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via [email](mailto:[email protected]?subject=Sandpack Timeout Error) or submit an issue on [GitHub.](https://github.com/codesandbox/sandpack/issues)

Several issues with "Getting started" guide

The Getting Started guide has several issues (https://pixijs.com/guides/basics/getting-started)

  • await can't be used on the top level like <script> tag unless the script-tag is of type="module"
  • The PIXI.Sprite.from does not work unless the sample.png has been loaded before with await PIXI.Assets.load('sample.png')

So the correct code in the end should be like:

<!doctype html>
<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script type="module">
      // Create the application helper and add its render target to the page
      const app = new PIXI.Application();
      await app.init({ width: 640, height: 360 })
      document.body.appendChild(app.canvas);

      // Create the sprite and add it to the stage
      await PIXI.Assets.load('sample.png');
      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((ticker) => {
        elapsed += ticker.deltaTime;
        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
      });
    </script>
  </body>
</html>

AssetPack link goes to a fork instead of pixijs' repository

Hey folks,

I'm surprised to see that the link, in the Ecosystem dropdown, to AssetPack goes to a fork of the pixijs repo — https://github.com/ehtick/pixijs-assetpack — instead of your own repo. Both seem to have the same history. I don't know who our fellow ehtick is, but seeing his 2.2k repositories does not make me trusty.

Apologies if there's a good reason for this, but from a new comer's perspective, this seem like it might be a security issue. :-)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.