Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Recommendations on project organization and references


Recommended Posts

I've just started with Pixi and HTML5 in general. All the examples I've seen this far handle all the code in a single file, which seems unrealistic even for a small game (drawing analogy to Unity and other game engines).

With that in mind, I'd like to ask:

  1. Is there a recommended file / folder structure for Pixi projects?
  2. The HTML5 Canvas seems to be a black box of sorts. The sprites, shapes, meshes, etc are not added as children in the DOM, and therefore cannot be referenced in the same way as you'd get a regular DOM element. Is there a way (either through HTML/JS or Pixi) to access a portion of the canvas by name? (For instance ,load a Sprite named Box in loadImages.js and get a reference to Box in gameLoop.js)
Link to comment
Share on other sites

1. no recommended strcture, copy something from https://github.com/pixijs/pixi.js/wiki/Boilerplate or use whatever you want if you already made several web-applications :)

2. After "loader.add('name1', 'mystuff.png')" that will appear in "loader.resources["name1.texture"]" or in "Texture.from("name1")" . If you are talking about instanced elements, make a recursive function that searches for a name. Here's simple mixin for one-level container: https://github.com/pixijs/pixi.js/blob/dev/packages/mixin-get-child-by-name/src/index.js

Some people build pixi tree on top of react basic functions and access everything through react API ;) But that doesnt mean there's a lib that you can just include and get the same result. You are on your own on this task.

Link to comment
Share on other sites

Thanks for the boilerplates link. That's helpful!


As for the second part, indeed what I need are the instanced versions. Thanks for pointing me to the Container, which put me on the right track looking at the API documentation.

In this simple, where I'm just trying to wrap my head around Pixi, I guess what I needed was as simple app.stage.getChildByName("name")

Link to comment
Share on other sites

The next step is to load something from the format of your choose, you need better access to it. For example, my friend has Tiled exporter https://github.com/eXponenta/pixi-tiled (there's pixiv5 branch if you need it) it does have a mechanism for requests by name but its not that good. You cant just tell "element1.element2.something" like Flash allowed us. 

I know that Pix2d editor author is working on something better for his format :)

Anyway, its one of many topics that pixi doesnt cover , people invent things on their own, there are numerous plugins of dubious quality, but its not solved. Be creative, find your own way, share it if you aren't shy.

Link to comment
Share on other sites

I recommend: npm > typescript > webpack. You can develop/organize everything in classes, easily build libraries and share across multiple projects, etc ... And really get that library/codebase experience that makes everything so much easier and faster. One of our main project is made up of a few hundred typescript classes and make use of a few js libraries including pixi.

Link to comment
Share on other sites

3 hours ago, Taly said:

Yeah, I'm used to actual classes (C#/Unity) and syntactic sugar classes (React).

I find game dev lends itself very well to that kind of structure.

Then pure typescript with namespaces will do just fine. Compile your stuff in js, and include it from html with pixi and plugins that you use.

I can make easy boilerplate for that, without webpack and other wrappers. Do you prefer pixijs v4 or v5?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...