Flixel Forums

development => releases => Topic started by: Billy on Mon, Dec 20, 2010

Title: FlixelJS [INCOMPLETE]
Post by: Billy on Mon, Dec 20, 2010
FlixelJS - Flixel in Javascript (for HTML5/Canvas)

A few months ago I was working on a port of Flixel to Javascript. While mostly complete, I ran into a number of critical bugs and put it on the back burner for while. I've been intending to finish it off, and I still do, but it's been stagnating too long, so, I think it's about time to just throw it out there.

I present to you, FlixelJS!

https://github.com/BillyWM/FlixelJS

Philosophy

My intention with this was a direct port that would be so close that existing Flixel users would feel at home. To this end, I kept even the library's internals identical as I went along, writing a few wrapper classes where needed, including BitmapData, each wrapping around a Canvas.

History

AS3 and Javascript are extremely similar; Both follow (mostly) the ECMAScript standard, aka "standardized Javascript". I commented before that they're so close that much of the code could be converted trivially, and this proved to be true. The conversion process was tedious, and yes, so much so, that I could have and should have done automatic conversion! I learned this the hard way. (Reading up on other conversion projects, I see that the guy who did the Unity port wisely did this from the start ;) )

I realized that in converting by hand a lot of small errors would creep in. I expected this, and I fixed a number along the way. Unfortunately a few big ones persisted. Unable to find the source, I decided that yes, I should go back and write a converter. I started on a very quick and dirty PHP script to do this, which is left almost finished. I took a break from FlixelJS for a while to dabble in other projects.

What works, what doesn't

Unfortunately, it's not usable in its current form because collision is broken. I converted the collision functions twice, but must have left an error in there both times, as it remains broken. Objects just pass through each other. This is the main reason I haven't released any of it before: You can't make much of a game without any collison checks.

Broken/incomplete:
Title: Re: [INCOMPLETE] FlixelJS (Flixel using HTML5/Canvas)
Post by: Billy on Mon, Dec 20, 2010
(reserving a couple posts for organizational purposes. Hope you don't mind. 1/2)
Title: Re: [INCOMPLETE] FlixelJS (Flixel using HTML5/Canvas)
Post by: Billy on Mon, Dec 20, 2010
(2/2)

Example...er...'game'

http://billy.wenge-murphy.com/flixel-js/testgame.html

Chrome or Firefox 4 (beta) recommended (Opera works too)
Firefox 3.6 has slow JS and slow canvas.

Example code

Besides embedding in an HTML page and loading of assets, FlixelJS games look very similar to what you're used to. Below this is the first game that ever worked in FlixelJS, a simple red stick man on a black background, falling into nothingness. Hey, at least it worked, and ran at 60FPS ;)

This simple skeleton looks just like a usual Flixel skeleton, just with different syntax.

Code: [Select]
Platformer = new Class({

Extends: FlxGame,

initialize: function() {
this.parent(320,240,PlayState,1);
FlxState.bgColor = 0xFFAACEAA;
},
});


PlayState = new Class({

Extends: FlxState,

initialize: function() {
this.parent();
},

create: function() {
this.player = new Player(10, 10);
this.add(this.player);
},

update: function() {
this.parent();
}

});

Player = new Class({

Extends: FlxSprite,

initialize: function(X, Y) {
this.parent(X, Y);
this.loadGraphic(Assets.images.player);
},

create: function() {
},

update: function() {
this.acceleration.y = 100;
this.parent();
},

});

Constructors are called 'initialize', and instead of super.update(); you call this.parent();
Title: Re: FlixelJS [INCOMPLETE]
Post by: zuperxtreme on Mon, Dec 20, 2010
Very interesting! :o
Title: Re: FlixelJS [INCOMPLETE]
Post by: Wing Eraser on Mon, Dec 20, 2010
Very nice. You put all the classes into a single JS file? Kinda hard to debug. Which IDE do you use for writing JS? I use Aptana, a plugin for eclipse. It's not the best, but it works fine for me.
Title: Re: FlixelJS [INCOMPLETE]
Post by: klembot on Mon, Dec 20, 2010
Awesome, I tried to take a shot at this myself but got bogged down with translating all the Actionscript to JavaScript. It's still early days for Canvas but this gives me a lot of hope for the future of the Flixel platform.
Title: Re: FlixelJS [INCOMPLETE]
Post by: Billy on Mon, Dec 20, 2010
Very nice. You put all the classes into a single JS file? Kinda hard to debug. Which IDE do you use for writing JS? I use Aptana, a plugin for eclipse. It's not the best, but it works fine for me.

Yeah it's not the prettiest but, for production, JS is packaged that way so I just worked on it on one big file.

I just use Kate (KWrite) on Linux. It's not an IDE but it has some of important parts like code folding, tabs, bookmarks, syntax highlighting of many languages, etc
Title: Re: FlixelJS [INCOMPLETE]
Post by: Billy on Tue, Jan 4, 2011
Well I haven't continued work on this yet, but I've opened some issues on the tracker to keep problems in order.

https://github.com/BillyWM/FlixelJS/issues

Contributions are very much welcome, of course!
Just fork, edit, and send a pull request
Or if git's too confusing you can post fixes here
Or message me on Facebook (sig)
Or email me file(s): iamthebilly (-at-) gmail {-dawt-} com

If you have Vista/Win 7 and can tell me how it works in IE9 that would be helpful too. The test game (http://billy.wenge-murphy.com/flixel-js/testgame.html) works in other modern browsers.
Title: Re: FlixelJS [INCOMPLETE]
Post by: camasthecat on Tue, Sep 6, 2011
Nice idea for ipods and devices that don't allow flash! :D
Title: Re: FlixelJS [INCOMPLETE]
Post by: Foxtacy on Tue, Jan 31, 2012
Do you intend to finish this? i'm very interested in this ^_^
Title: Re: FlixelJS [INCOMPLETE]
Post by: reacher on Fri, Mar 16, 2012
Do you intend to finish this? i'm very interested in this ^_^
I've been working on a similar project. It's a direct port of Flixel into javascript. Hopefully I can have something to show the community in the next few weeks.
Title: Re: FlixelJS [INCOMPLETE]
Post by: test84 on Fri, Mar 16, 2012
that should be cool. Check out ImpactJS, it's most similar thing to flixel that i've seen so far.