pixelscommander / flashjs Goto Github PK

FlashJS doesn`t work on IE8,9 for now.
We have to fix getters and setters in way declared in MSDN.

Assets scale is nice feature of FlashJS, but there are few issues connected with this.

Assets are loaded with AssetsLists which is object of AssetList class. Every AssetList have to know what scale to use (what folder to use as loading path). And scale can be obtained from pixelScale property of Stage. And we can have few stages on page.

So first question is - what is the best way to pass scale to AssetLoader? Is it ok to have one AssetsList per Stage? There are no any problems if it is. Every Stage would have AssetLoader with particular pixelScale.

But!

We also need tag for DOM interface and this can be otained with help of global AssetsList. This breaks proposition of one AssetList per Stage!

So there are few questions:

1.Choose best way to inform AssetList about assets scale needed.
2.Propose mechanism for determining source AssetList for tag. Will it be global AssetList?

Are new getters faster/slower/have no changes in perfomance?

Add getChildAt and getChildByName that would return corresponding child of DisplayObject

A lot of IF operators can be replaced by predefined functions this or this one. It would speed up engine.

Create Flash classes popularity chart to write development plan to FlashJS

We are using JQuery methods to manipulate CSS properties. As we have need to speed up FlashJS as it`s possible we have to check alternative ways to change left, top, rotation, opacity CSS properties. Event 5% of speed up would be nice.

http://jsperf.com/getters-setters-vs-direct

There is idea to remove getters for all variables that support caching and just do this cached variable instead of getter. It would be x100 faster than getter.

Also it`s nice to do getPropertyName, setPropertyName for every getter/setter. It would be 70x faster than using them.

Avoid collisionManager double iteration

<asset/> tag accept "id" attribute with assetID, then determines URL of this asset in needed scale and then inserts it to page as tag. Also <asset/> tag have to forward all of it`s attributes to tag it produces, so <asset id='logo' width='100%'/> will produce <img src='./assets/2/logo.png' width='100%'/>

For image asset it will produce <img> tag.
For audio asset - <audio> tag.
For animation asset - <img> animated with css animation technique.

Assets scale is nice feature of FlashJS, but there are few issues connected with this.

Assets are loaded with AssetsLists which is object of AssetList class. Every AssetList have to know what scale to use (what folder to use as loading path). And scale can be obtained from pixelScale property of Stage. And we can have few stages on page.

So first question is - what is the best way to pass scale to AssetLoader? Is it ok to have one AssetsList per Stage? There are no any problems if it is. Every Stage would have AssetLoader with particular pixelScale.

But!

We also need tag for DOM interface and this can be otained with help of global AssetsList. This breaks proposition of one AssetList per Stage!

So there are few questions:

1.Choose best way to inform AssetList about assets scale needed.
2.Propose mechanism for determining source AssetList for tag. Will it be global AssetList?

I try to accomplish the YAZ-demo, without the fish-sprite (is that even possible?). However the canvas element is still empty. What I'm doing wrong? http://fiddle.jshell.net/pdcBR/

// FlashJS
var stage = new Stage("canvas");
var testObject = new DisplayObject();
testObject.width = 100;
testObject.height = 100;
testObject.x = 0;
testObject.y = 0;
testObject.rotation = 18;
testObject.fillColor = '#f00';

stage.addChild(testObject);

ActionScript tag as well as flash.display.createStage have to create stage based on DIV with overflow hidden.

Due to http://jsperf.com/csstext-vs-style/3 it`s much faster to use element.style to manipulate CSS properties.

Next step is to calculate virtual StyleSheets for object by its ID once per frame for all modifications!
And assign them.
It looks like sci-fi but may be possible.

Add width/height and maskimage recalculation handler
So if we add some content to display object or it`s childs we have to recalculate width and create new image mask

At the moment we have Canvas and DOM renders but we need WebGL one to get maximum perfomance for desktop.

It`s quite easy to use Canvas render as example and develop WebGL analogues of DisplayObject, DisplayList, Stage, SpriteAnimation

Now we dont delete all links to childs so it continue to execute
Need to find way to removeObject completely

may be object.delete = function () {delete this'}

Move racing demo to Box2D to have collision detection.

Very often we need to preload some assets even before page is displayed and any user code is executed.

Probably it`s good idea to implement data-assets attribute for FlashJS script tag like data-main in RequireJS.

It will calculate current scale based on window size and load initial assets.

Add Canvas mode with simpliest functions for MCs, no group rotation or animation

hitTest and areCollided functions of DisplayObject and CollisionManager

Add some kind of global timer. Do it as percise as possible

Known methods:
SVG animation
GIF animation
JS code / algorithms

It seems that there have to be some possibilities to animate pngs and switch GIFs to exact frames.

Let users to dispatch events in flash manner. Object.dispatchEvent(new Event("type")); At this moment it works only in Chrome and other browsers need jQuery style object.trigger("type");

Add GitHub compatible readme to project

Timer constructor with event dispatching, like we have in flash.

For example dispatch Event.COMLETE for loading, MouseEvent.CLICK on click or tap and so on - let API user to use same event listeners as Flash let.

Hi all, I'm opening this issue because I'd like a new feature is implemented into FlashJS, allowing developer to add actionscript bootstrapping in script tag sections. How I imagine the script element is illustrated below.

<script id="actionscript1" type="text/actionscript" data-width="200px" data-height="200px"  data-scaletoscreen="false">
<!-- FlashJS ActionScript code goes here without any worries about xml escaped characters -->
</script>

Please note that I've nothing against the actionscript custom HTML tag, but I feel that these application specific tags find their appropriate usage in web design realm and when you need them to support your web application logic. In most browsers your custom tags will be treated as inline elements like span, this means you have to write CSS to declare rules such as "actionscript { display: none }" at least to prevent unwanted content display when JS is disabled or you page is not processed as expected.

Thus, the ActionScript Tag Executor would be easily adapted for the new pseudo script tag as follow.

var $push = Array.prototype.push;
var tags0 = document.getElementsByTagName('actionscript');
var tags1 = document.getElementsByTagName('script');
var tags  = [];
$push.apply(tags, tags0);
$push.apply(tags, tags1);

for (var i = 0; i < tags.length; i++) {
    var astag = tags[i];

    if (astag.tagName === 'SCRIPT' && 'text/actionscript' !== (astag.type || ''))
        continue;

    var scriptText = replaceAll(astag.innerHTML, "&lt;", '<');
    scriptText = replaceAll(scriptText, "&gt;", '>');
    var width = astag.getAttribute('data-width') || astag.getAttribute('width');
    var height = astag.getAttribute('data-height') || astag.getAttribute('height');
    var scaleToScreen = astag.getAttribute('data-scaleToScreen') || astag.getAttribute('scaleToScreen');
    var canvas = w.document.createElement('canvas');
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    canvas.id = 'flashjs' + UID();

    // replace existing node astag with the new span element canvas
    //astag.parentNode.appendChild(canvas);
    //astag.parentNode.removeChild(astag);
    astag.parentNode.replaceChild(canvas, astag);

    var stage = new Stage('#' + canvas.id, parseInt(width), parseInt(height));
    //...
    //...
}

I think what is most enticing about this diverse approach is that you don’t have to vary too much the existing code base in order to begin using it.

Best regards, Giorgio Arata.

I miss some simple drawing methods like:

• Arc
• Ellipse
• Line
• Polygon
• Rectangle
• Text

Loader have not any Flash - like events and methods but have to.

Global displayList to remove objects from collisionManagers etc.

Needed for removal functions.

Better - every object have all object included. And information is actual in any moment even after loading HTML as movieclip.

There is no CSS3 transformations support in IE6,7,8 so Rotation can be done here with help of filters. We have article about this stuf supplied by Rostag http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/ there is need to implement rotation into all possible IE versions.

At the moment we have scale-independant X,Y for objects but their width, height depends on real size of images used.

So for scale 4 it will be 32_32 and for scale 1 it will be 8_8.

It`s not good for game logic development, all game logic have to be independant of scales.

We have to modify DisplayObject code to have 8*8 always, but also implement realWidth and realHeight properties to use for rendering.

It seems not so easy problem.

First of it have to be done throuth CSS transformations. They are fast enought.
Second - if we have two transformations we have to build a transformations: CSS properties string as space separated list ex. rotate(45deg) scale(1,1) translate(0,0) and it is needed to have some kind of memoisation in it to do manipulations with this string as fast as possible.

Not easy issue.

Add MovieClip constructor that would have TimeLine and corresponding methods.
Large issue have to be started after corresponding investigation.
We have to understand all methods of animation - SVG, GIF, PNG frames.
Also MovieClip have to depends on document FPS.

To handle preloading we need special event on all loaders completed.
It`s not correlate with Flash API but it would help as part of game development JS framework.

Have to develop utility function like setVeriableGetterSetter(var, getter, setter) and change all this IF stuff with it

If global AssetsList fits for us - rename it to Library and make corresponding refactoring

Add function for ENTER_FRAME it can be faster.
Enable event only if listener added.

Add removeChild and removeChildAt that would delete DisplayObjects from parent