Recommendations on project organization and references

[Taly]

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)

[ivan.popelyshev]

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.

[Taly]

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"). 

[ivan.popelyshev]

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.

[botmaster]

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.

[Taly]

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.

[ivan.popelyshev]

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?

[Taly]

That's an awesome offer! Thanks!

Using one of the boilterplates from the link you provided above should be sufficient to get me going.

[botmaster]

The advantages of wrappers like webpack and others can come later but keep that option in mind. They do/can automatize the compilation/transpilation/deployment of your projects. As your projects get more complex, wrappers are really time savers.