Graphics / user interface / pixi.js

[MKelm]

It would be a good approach to use a WebGL renderer for a fast graphic performance.

That allows to make rich graphic add-ons possible and the possibilities e.g. to draw a planets map are better. But e.g. the click event handling is a little bit more complex.

I found pixi.js (MIT license) which is incredibly fast, e.g. 3000 moving sprites with border collision @ max fps (60fps with GF630GT): http://www.goodboydigital.com/pixijs/bunnymark

It does not need any WebGL knowledge, because it is a lightweight 2D library using WebGL. The GitHub page contains more infos and nice demos: https://github.com/GoodBoyDigital/pixi.js

[MKelm]

A first experiment with Pixi.js:

• screencast http://www.youtube.com/watch?v=IcF6U8RH9WI
• files https://github.com/MKelm/mct/tree/master/lib/display/experiments

[MKelm]

External pixi.js experiment in combination with SoundManager2 http://startdev.ru/experiment/pixijs

But it might be better to use the HTML5 audio api in MCT (SM2 needs Flash!), more details on usage here: http://www.html5rocks.com/en/tutorials/webaudio/intro

[MKelm]

Note for e.g. click events: Nice pixi.js has an interaction manager see here http://www.goodboydigital.com/pixi-js-gets-interactive / http://www.goodboydigital.com/pixi-js-now-even-better-at-being-interactive

[MKelm]

An option for a texture optimization sprite sheets: http://www.goodboydigital.com/pixijs/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html

[MKelm]

Here is another way to create sprite sheets: http://peepsquest.github.io/tutorials/creatingSpritesheets.html And a related debian tutorial for node / npm install http://ariejan.net/2011/10/24/installing-node-js-and-npm-on-ubuntu-debian/

[MKelm]

I will continue the user interface / graphics development issue here, current status:

• window builder: extensions of logic for menu interaction -> layer(s)

The scenes do not have a builder logic yet, I use custom logic for the two current scenes only yet. Maybe the next graphics project is to refactor them to a rudimentary scene builder with connections to the window builder. But that might be not important until the game gets a large set of scenes.

And here is a tutorial for a scene handler / manager, which might be useful in combination with a scene builder http://ezelia.com/2013/05/pixi-tutorial This might be interesting for a later game version with more scenes too. The first game versions do not include more than one planet scene. The first set of features can be implemented in the planet scene and with additional windows.

Note: The scaling is not wide-screen compatible yet, I did not found a solution for that yet, but it is a minor-minor problem now. Maybe that needs an layout manager, with different screen aspec ratio profiles.

[MKelm]

The interaction / layer functionality has some improvements / extensions now, but the action handling in scene windows has some limitations currently, the logic to handle interaction chains with more than one sub-layer needs an overhaul ...

[MKelm]

The window builder contains content text elements with multi line / word wrap support now.

I added tween.js with a basic tween animation for the menu planet.

I fixed my atlastojson tool, now I can easily create animations for pixi.js test animation http://my.shrt.ws/mct/spine/space/test.html i have to use more frames to get a slower animation and this test is not very practical, because to move some planets it is better to use tween animations, spine is good for single objects with different behavior animations

I am going to animate some birds for the mct planet now :)

[MKelm]

You can use atlas files directly in pixi.js now, I have written a loader https://github.com/GoodBoyDigital/pixi.js/pull/238

Here is a new wiki article about animations https://github.com/mctteam/mct/wiki/Animations The first animation object is the bird now.

[MKelm]

The window implementation has reached the current goal, more I do not want to do with it. Because the current file reaches it's limits and it gets more confusing with the time. I need more framework solutions now to re-factor the window stuff later. I will activate the companies window in the planet screen again later, currently I have to do with the grid and some other new MCT framework implementations. When I keep the speed, I will get the first version of the Investment center on the planet (grid) which can be linked to an action to open the companies window. So that is a new goal for the next pre-alpha release tomorrow.

The companies window has a multi column list of companies for each technology field and their types, but they have no further interactions yet. But that might be enough for now.

I have started to add files related to MCT.DisplayObject which is an wrapper for pixi.js DisplayObjectContainer with some display objects designed for mct, that makes it easier e.g. to add buttons, because e.g. the window buttons contains a interaction sprite and a text element and so on ---

More goals for the Framework are: Something to handle Layouts, Layouts will be connectors between grids and display objects. Currently I do have a planet grid only, but I will add a base grid class to add more grids, e.g. a grid to get the planet positions in the universe ... so the planet grid contains structure data e.g. to get building positions and later area map positions and so on ... and the layout contains data and logic to arrange parts on a grid ...

The grid allows calculations of all nodes, a part of nodes, or just to add node by node.

[MKelm]

I have added a first version of a max fps profile, which reduces the cpu usage alot, depending on the scene, e.g. the planet scene does not have animations yet, so the maxFps is 5 here, which reduces my CPU usage from 100% to 15%, the menu runs with 50 which is enough for smooth animations in my opinion, this reduces my CPU usage from 100% to 60%.

A mct.pixi option to disable animations has been added, but it is a dummy value only, it can be used in future to combine disabled animation mode with a much lower maxFps profile in all scenes to reduces cpu usage and improve graphic performance on older systems and/or systems without enough graphic acceleration support.

[MKelm]

I will use this status for the next pre-alpha release now, I will open a new graphics related issue if needed ...