Martin1971

Building a Flight Sim

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.