Building a Flight Sim

[Martin1971]

Hi, I am new to PixiJS and I need to create an animated flight simulator display like the following:

https://en.wikipedia.org/wiki/Primary_flight_display#/media/File:Primary_Flight_Display_of_a_Boeing_737-800.png

I'm looking for any tips on how to approach this.  I assume I will have to create every single detail (line, curve, text) as an individual object and keep track of all those objects in some kind of data structure so I can find each element easily and destroy it an recreate it again with a new one to animate it.  

There's probably going to be 100+ different graphical elements I will have to draw individually.

What is the best way to store all of these individual graphical elements?

The air speed and altitude indicators on the left and right have vertical scrolling numbers, any tips on how to implement this?

Thanks

Martin

[Exca]

Save the images in a spritesheet and use that, that way they can be drawn in a batch. Using a tool like texturepacker or spritesheet.js makes creating sheets easy.

Building the view itself can be done either with somekind of tool (I'm not familiar with any, so cant recommend one) or you could just code the views needed. Full explanation on how to do that would take pretty long time and I'd suggest starting with the examples / tutorials.

Easiest way to make vertical scrolling numbers is to have N text elements and then put them inside a container and apply a mask to that. Good example of this method is the slots example in pixi examples. It has images instead of text and 3 visible icons instead of one, but the way it works is identical to this situation.

[ivan.popelyshev]

> There's probably going to be 100+ different graphical elements I will have to draw individually.

> What is the best way to store all of these individual graphical elements?

Lets see... I'll recommend very strange thing: try to do it with pure canvas2d api first  "clip" will help with vertical scrolling. Your example looks like an ideal dive to basic canvas2d api  100+ elements is fine, especially because almost all PC's have accelerated canvas and I have a certain insight on how it works.

As for PixiJS implementation, yes, it can be done, and we also have masks which work like clip, but .. really i just feel that canvas2d will be better for you in beginning. When you start drawing many clouds using sprites, and earth, and all other things - then pixijs will help you to gain necessary speed.