Begginer - About html5, NME and Sprites

[Julien A]

Hi everyone,

I'm starting haxe and like other people before, I am a little lost with all packages and libraries.

I would be grateful if someone could answer my questions. Some of them may seem stupid :).

1- My first task is to make the proof haxe applications can offer a reliable html5 output. I know html5 is only part of what is available with haxe, but for the moment it is what to I have to do :).

2- I'm an AS3 developper, and I have to do it a flash way : using sprites, display list, events...

So here comes my main question : what libraries/framework should I use to do that ?

- JS haxe library ? I only see there classes to manage html element... So the purpose of this library must be to code javascript in haxe ?

- The flash8 library ? Flash in haxe i guess. Seems pretty nice, but I suppose it only works to compile swf ? 

- NME ? It must be the good choice, but I don't really understand the link between NME and Haxe libraries.

Which haxe libraries can I use in a NME project ? When looking at NME api, many "non-nme" packages seem to be available... but flash develop doesn't find them for my nme project. Configuration problem ?

When creating a Sprite object in flash develop (NME project), it is confusing to see 3 available classes : 

- browser.display.Sprite 

- native.display.Sprite 

- nme.display.Sprite

I guess "browser" targets only the html5 output, "native" targets desktop apps and only "nme" will allow cross compilation ? But with some limitations maybe ?

Thank you for your help.

[Michel Romecki]

Hi Julien,
You should look at NME .
It's a crossplateform framework, that maps all native plateforms API to the Flash API. So you can use Sprite as on Flash target for example.
Then, you can consider it as a lib, so you can mix it with others haxelibs too. 
All you should keep in mind is that nme.display.Sprite, will be mapped to flash.display.Sprite for the flash target, to neash.display.Sprite, for all CPP targets, browser.display.Sprite for HTML5 and so on.

Install the NME lib using haxelib install nme and then , take a look into this folder, you'll see nme folder inside which is the "top level" API.

Then looking in nme/display/Sprite.hx for exemple, you'll see what's going on with the compilation directives (#if flash .....) so you'll follow the right classes and so on, and you'll see the light then :D

Best,

Michal

2012/12/28 Julien A <julien....@gmail.com>

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
 
 
 

[j...@justinfront.net]

Julien

The html5 stuff that is in the SVN is fairly useful there is an html5 haxelib or similar but you may need to mod them, so better to work with SVN for JS target.  I have put some Gist's of code up using html5 Canvas they use no special libraries, some may need modification as SVN has changed slightly over that time but if your find one interesting just pm me and I will send you a zip.  For tweening I suggest maybe feffects haxelib, and polygonal for datastructures other than that really you have to explore for yourself there is a lot of good work out there so it's hard to know where to start.  But yer some of my gists largely avoid any haxelibs,

https://gist.github.com/Justinfront

I have some other stuff online like jigsawx that you may find interesting but depending on your use, my stuff maybe irrelevant as I take js from a flash perspective and am exploring just limited aspects at a time so may not follow best practices, ie often don't use any CSS or if I do I code it!

There is the start of some tutorials on using canvas here: http://haxe.org/doc/haxe_instructors/justinfront but still aim to work on them code is mostly in the gist above.

Best

Justin

[Joshua Granick]

Cool, you're an AS3 developer.

Alright, imagine ActionScript without Flash Player. It's kind of weird, but what if you had ActionScript but could not create Sprites or MovieClips, Sounds or URLRequests? You'd have the ability to write code, to make classes, to compile (probably) a command-line process, but you wouldn't build a game that way.

That's a little like what you get using Haxe -- a cross-platform programming language, but it does not have graphics, sound, events, network requests and most of the other things that come stock with Flash.

NME extends Haxe, and provides cross-platform build tools for targeting desktop and mobile platforms. It takes the "magic" cross-platform ability of the Haxe library and applies it to supporting Windows, Mac, Linux, iOS, Android, BlackBerry, webOS, Flash and HTML5 using the Flash-style API.

I would recommend you give NME a try. If you like the experience, you might also discover some of the other ways you can use the Haxe language (programming server-side code, writing strongly-typed Javascript and other cool uses), but NME will be the closest parallel to your experience as a Flash/AS3 developer.

I apologize how the namespace feels crowded.

NME uses Haxe typedefs to redirect classes, depending on your target platform:

package nme.display;

#if (cpp || neko)

typedef Sprite = native.display.Sprite;

#elseif js

typedef Sprite = browser.display.Sprite;

#else

typedef Sprite = flash.display.Sprite;

#end

When you use the nme.* classes, it automatically becomes one of the other classes, based on your target platform. I hope that makes sense? Actionscript does not support conditional compilation (#if #else #end) or typedefs, but those are two of the features which makes something like NME possible. You target a single API, but the underlying implementation changes drastically depending on whether you going to Flash, C++, or Javascript.

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
 
 
 

--

Using Opera's mail client: http://www.opera.com/mail/

[j...@justinfront.net]

Julian

I put another JS experiment up today a Canvas calendar click months to change.

https://plus.google.com/u/0/100887585476076589216/posts/NbJTk1trVos

It's not ideal use of JS and you need recent svn version of haxe ( you can probably get a nightly ) but it is another example to explore and does not use any haxelibs.

Best 

Justin

[Eric Priou]

Joshua and al.,


To be completely true, your comparison with the flash player should note that in NME, Sprite and MovieClip (vectors) are converted to bitmaps.
That make a huge difference in the development workflow, dataviz for example.
Maybe not in the gamedev perspective btw…

I quiet anderstand the reason behind this implementation choice, but it is definitively something to know before opting for the NME toolchain.

I don't know if SDL comes with vectors primitives, but I've used SVG in the browser for my actual project, and it really kicks ass !
Then, if the target is web only, libraries like Raphael.js (or to some extends d3.js) and jQuery SVG should be considered as great alternatives.
And haxe externs will make the thing works pretty well…

Anyhow, I wonder if NME in native and browser targets could use vectors to represent Sprite and bitmap for Bitmap ?

Several ways to investigate further though :
- using scale9 : could be seen as a way to emulate scaling without pixels explosions ?
- swf import : is it also converted to bitmaps ?
- Cocktail lib (https://github.com/silexlabs/Cocktail/), built onto NME : any SVG support ?
- A webkit embedded solution :
- hxwebkit (https://github.com/tong/hxwebkit)
- phonegap-like croxit (https://github.com/waneck/croxit/)
-…

Then my question is : will NME support vector sometime ? Something near ?
Should I write a wish here : http://haxenme.uservoice.com/forums/169628-general

Thanks for your tips and hints.



---
Eric Priou aka erixtekila
http://www.ericpriou.net

[tom rhodes]

Hey, also look at createJS, there are also externs available in haxelib for it.

i've recently done 2 animations that cross compile to js/canvas and flash using 95% the same code (using TweenLite/TimeLineLite across both targets). where the code differs was just for handling stage resizing events and initialising assets. 

there's a good web workflow hiding in there somewhere :) all your vector artwork stays as vectors with all the benefits that brings. i'll clean up one fo them and put the source on github this week, i need to properly add the documentation to the greensock stuff and add some comments but it shouldn't take too long to sort out.

[Eric Priou]

Hi Tom,

Nice addition.

I'd like to take a look at your sources when available ! Thanks.

Two questions :

- what createjs produce in the DOM in place of vectors ?

- why not use createjs's tweenjs lib instead of tweenlite (which i don't know if it's free and opensource ?)

Thanks,

Le 30 déc. 2012 à 10:51, tom rhodes a écrit :

Hey, also look at createJS, there are also externs available in haxelib for it.

i've recently done 2 animations that cross compile to js/canvas and flash using 95% the same code (using TweenLite/TimeLineLite across both targets). where the code differs was just for handling stage resizing events and initialising assets. 

there's a good web workflow hiding in there somewhere :) all your vector artwork stays as vectors with all the benefits that brings. i'll clean up one fo them and put the source on github this week, i need to properly add the documentation to the greensock stuff and add some comments but it shouldn't take too long to sort out.

[Eric Priou]

Indeed it is a good workflow considering Flash as an IE fallback for example.

Raphael.js uses VML for IE < 8 which is nice, but incredibly slow ! 

Can't wait to dig in your example.

Thanks,

Le 30 déc. 2012 à 10:51, tom rhodes a écrit :

Hey, also look at createJS, there are also externs available in haxelib for it.

i've recently done 2 animations that cross compile to js/canvas and flash using 95% the same code (using TweenLite/TimeLineLite across both targets). where the code differs was just for handling stage resizing events and initialising assets. 

there's a good web workflow hiding in there somewhere :) all your vector artwork stays as vectors with all the benefits that brings. i'll clean up one fo them and put the source on github this week, i need to properly add the documentation to the greensock stuff and add some comments but it shouldn't take too long to sort out.

[Eric Priou]

On the tweenlite/max side, did you produce externs also ?

Le 30 déc. 2012 à 10:51, tom rhodes a écrit :

Hey, also look at createJS, there are also externs available in haxelib for it.

i've recently done 2 animations that cross compile to js/canvas and flash using 95% the same code (using TweenLite/TimeLineLite across both targets). where the code differs was just for handling stage resizing events and initialising assets. 

there's a good web workflow hiding in there somewhere :) all your vector artwork stays as vectors with all the benefits that brings. i'll clean up one fo them and put the source on github this week, i need to properly add the documentation to the greensock stuff and add some comments but it shouldn't take too long to sort out.

[Eric Priou]

Other externs for createjs :

* https://github.com/nickalie/CreateJS-Haxe

* https://github.com/Fintan/easelhx

Rely on xirsys_js.

* https://github.com/periscopic/EaselFL

Can someone advice ?

Le 30 déc. 2012 à 10:51, tom rhodes a écrit :

Hey, also look at createJS, there are also externs available in haxelib for it.

i've recently done 2 animations that cross compile to js/canvas and flash using 95% the same code (using TweenLite/TimeLineLite across both targets). where the code differs was just for handling stage resizing events and initialising assets. 

there's a good web workflow hiding in there somewhere :) all your vector artwork stays as vectors with all the benefits that brings. i'll clean up one fo them and put the source on github this week, i need to properly add the documentation to the greensock stuff and add some comments but it shouldn't take too long to sort out.

[tom rhodes]

hey,

first the questions...

- what createjs produce in the DOM in place of vectors ?

createJS uses easelJS to draw the vectors to the canvas and then it gives you references to your symbols as display objects. the api has diferences to the flash but you can get around that with some conditional compilation. createJS produces a js file with all the vector data in it, which you include along with the createJS code.

- why not use createjs's tweenjs lib instead of tweenlite (which i don't know if it's free and opensource ?)

i love the greensock stuff and have been using it since v1 :) now that the v12 beta supports JS too with the same API i wanted to use the magic of haxe to compile to both targets using the same code for the animation. it works well. i had a word with Jack on the forum about haxe, he hasn't looked at it for a while and isn't interested in it too much at the moment but once i have the externs finished he wanted me to post them on the greensock forum for others to pick up on.

i just used the haxelib externs for createJS and they worked ok for me, i might have made a couple of slight changes but nothing serious. i'll see if i can package up a little demo today and post it on github for you, but it might end up being later in the week!

cheers,

tom.

[Eric Priou]

Thanks Tom,

But don't hurry.

I've cooked it up for me already…

I'll managed to get CreateJS-Haxe + EaselFL working together in pure haxe, as EaselFL use javascript.

Best wishes,

[Joshua Granick]

I believe when rendering, everything becomes a bitmap?

If you are concerned about aliasing, NME uses software rendering when
"cacheAsBitmap" is set to true. Instead of scaling using the GPU, it is
drawn again at the target size.

I believe that NME targeting HTML5 is similar... everything is drawn into
a Canvas element. If you want to redraw the graphic rather than using CSS
transforms to scale, I think you would need to use a Bitmap draw to force
it to recreate at the target size.




On Sat, 29 Dec 2012 14:40:40 -0800, Eric Priou <erixt...@gmail.com>
wrote:

[tom rhodes]

yup canvas does become a bitmap, but a call to update the stage with easelJS whilst scaling a container say, will give you the same end result as scaling vectors in flash. the main benefits though are using the same source vector assets (from illustrator or flash etc) in both versions.

the last time i was using the html5 target in nme there were problems with the drawing API, and everything was being drawn into seperate canvas elements. there were also problems with teh text rendering, using an nme html5 piece in a web page where it was nested in the DOM caused problems with the mouse events and hit targets etc. i'll have another look but the createJS stuff worked very well for me, the only gotchas are to do with text being a DOM element so you have to be carefull with the hierachy a bit.

i reckon the html5 target in NME could benefit from looking at how createJS is handling things.

[Joshua Granick]

I've mostly used the canvas text rendering in the HTML5 target. With an embedded font, you can have smooth rendered text inside your canvas.

If you scale objects using a canvas API like the new drawTiles() implementation, perhaps it will render smoothed. By default, display objects in the HTML5 target are scaled using CSS3 transforms, which will perform faster on certain browsers but would likely not provide any smoothing. If you are not using drawTiles(), you can also try creating a BitmapData object, and using draw to blit everything to a single canvas.

In the development builds for the SWF library, SWF content can carry directly over to HTML5. There's a few things to work out before its ready, though

[Julien A]

Thank you all for your help :).

If I understand, There are two ways to do what i want : targeting html5 using an as3-like code.

- NME : A kind of swiss army knife of haxe. I've started coding with it, and I love it, but i got many problems with html5 targets. 

https://groups.google.com/forum/#!topic/haxelang/XkOeqCpNtJw

But maybe I simply not using it properly, or I need some external libs to get html5 run fine.

- Or, considering I only want to target html5, some haxe version of JS libraries should make it. CreateJS and related if I understand you well.

I have to admit i'm pretty noob in the JS world, but I will look also this way.

[Julien A]

I've found this link related to my question : http://nickalie.com/posts/67.

[tom rhodes]

yeah that's a great link and what got me interested in the createJS stuff :)

--

[Joshua Granick]

Funny, I ported the "Penguins" benchmark to Haxe. I had no idea it come from a post originally comparing NME with CreateJS :)

I used to help create the "drawTiles" feature, where I got better performance:

http://www.joshuagranick.com/examples/penguin/createjs/

http://www.joshuagranick.com/examples/penguin/nme/

I got 2400 penguins at 30 FPS in Firefox, using CreateJS.

I got 2750 penguins at 30 FPS in Firefox, using NME, so a 15% increase.