sbiermanlytle / iioEngine

iio Engine: A JavaScript game engine for HTML5 Canvas
http://iioengine.com
455 stars 81 forks source link

v1.2 -> 1.3 performance differences #26

Closed jamessimo closed 8 years ago

jamessimo commented 10 years ago

Looking through the the new 1.3 docs and demos and I am excited about the future of iioEngine, however I have to ask. Apart from the syntax changes and the new iioScript, is version 1.3 more efficient/performant at basic engine tasks? Like drawing frames, handling multiple objects, garbage collection etc..

Keep up the great work!

sbiermanlytle commented 10 years ago

Thanks. I have not done any formal tests on efficiency, but I think 1.3 is more efficient at drawing, rendering a lot of objects, and update calculations.There will be unit testing before the full version is released to establish limits and see if anything can be improved.

Note that there is a simple flag in 1.3 that drops some properties and functions from an object to use less data and processing time. An eventual goal of iio is to make it possible to customize the data usage of each object to make it as efficient as possible.

sbiermanlytle commented 10 years ago

Also, note that iioScript is entirely optional. It exists to speed the process of adding properties and making really simple apps, but if optimal performance is essential for an app (like it is for all mobile apps), avoid using iioScript and write in pure JS:

// add with iioScript (easy, but not optimal)
app.add( 'center 80 blue outline red 5 simple' );

// add with JS (optimal for performance)
app.add( app.center, {
    width: 80,
    height: 80,
    color: 'blue',
    outline: 'red',
    lineWidth: 5,
    simple: true
});

iioScript is generally fine to use in add when the application first starts up, but be careful using it during run time code if performance is a priority.

sbiermanlytle commented 8 years ago

Ok so ended up going in a different direction with v1.4.

(In the year that I was developing v1.3, iioScript was seperated from the JS library and became its own language that could be compiled into JavaScript. I still have plans for the language - you can see it in the v1.3 branch - but have been focusing exclusively on the JS library for iio.js v1.4)

Instead of passing string shorthand to a constructor, you must pass key value pairs:

app.add( new iio.Rectangle({
  pos: app.center,
  width: 80,
  color: 'blue',
  outline: 'red',
  lineWidth: 5,
});

Note that there is a similar 'best practice for performance' scenario in v1.4 that there was in v1.3:

obj.set({ color: 'black' }); // slightly less efficient

obj.color = iio.Color.black(); // slightly more efficient

slightly more work is done to interpret the set command, and convert black into an iio.Color object, but its really pretty negligible unless you are doing hundreds of these operations.

Also, I should point out:

obj.add( new iio...({...}); // automatically redraws
obj.add( new iio...({...}, true); // suppress the redraw
obj.set(... , true); // set also has a redraw suppress param

Make sure to suppress the redraw if you are adding more than one object at a time and the redraw is totally extraneous for any animated apps.