Author Topic: FlixelJS [INCOMPLETE]  (Read 5715 times)

Billy

  • Active Member
  • ***
  • Posts: 159
  • Karma: +0/-0
  • Herper of Derps
    • View Profile
    • billy.wenge-murphy.com
FlixelJS [INCOMPLETE]
« 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:
  • Collision
  • Transparency problems
  • A few minor classes not yet converted
  • Asset management system not added (was waiting til I got the library working
  • Sound stuff not addressed at all (waiting for asset management first)
  • Tilemap issue (it draws a little notch on tilemaps for some reason)
  • Problems with sprite rotation (Currently disabled IIRC)
« Last Edit: Mon, Dec 20, 2010 by Billy »

Billy

  • Active Member
  • ***
  • Posts: 159
  • Karma: +0/-0
  • Herper of Derps
    • View Profile
    • billy.wenge-murphy.com
Re: [INCOMPLETE] FlixelJS (Flixel using HTML5/Canvas)
« Reply #1 on: Mon, Dec 20, 2010 »
(reserving a couple posts for organizational purposes. Hope you don't mind. 1/2)

Billy

  • Active Member
  • ***
  • Posts: 159
  • Karma: +0/-0
  • Herper of Derps
    • View Profile
    • billy.wenge-murphy.com
Re: [INCOMPLETE] FlixelJS (Flixel using HTML5/Canvas)
« Reply #2 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();
« Last Edit: Mon, Dec 20, 2010 by Billy »

zuperxtreme

  • Contributor
  • ****
  • Posts: 254
  • Karma: +0/-0
    • View Profile
    • Buddah
Re: FlixelJS [INCOMPLETE]
« Reply #3 on: Mon, Dec 20, 2010 »
Very interesting! :o
..."without order nothing exists, without chaos nothing evolves"... 
Zoklet.net

Wing Eraser

  • Guest
Re: FlixelJS [INCOMPLETE]
« Reply #4 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.

klembot

  • Member
  • **
  • Posts: 61
  • Karma: +0/-0
    • View Profile
Re: FlixelJS [INCOMPLETE]
« Reply #5 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.
I will never reveal the twofold secret.

Billy

  • Active Member
  • ***
  • Posts: 159
  • Karma: +0/-0
  • Herper of Derps
    • View Profile
    • billy.wenge-murphy.com
Re: FlixelJS [INCOMPLETE]
« Reply #6 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

Billy

  • Active Member
  • ***
  • Posts: 159
  • Karma: +0/-0
  • Herper of Derps
    • View Profile
    • billy.wenge-murphy.com
Re: FlixelJS [INCOMPLETE]
« Reply #7 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 works in other modern browsers.
« Last Edit: Tue, Jan 4, 2011 by Billy »

camasthecat

  • Contributor
  • ****
  • Posts: 461
  • Karma: +0/-0
  • WOW! 400+ Posts!? Jeez! Do I have a life!?!?
    • View Profile
    • My site for thermalJS, an HTML5/Javascript engine kinda-like flixel:
Re: FlixelJS [INCOMPLETE]
« Reply #8 on: Tue, Sep 6, 2011 »
Nice idea for ipods and devices that don't allow flash! :D

Foxtacy

  • Aspiring Indie Game Developer, Prototype Musician, Lame Pixel Artist
  • Member
  • **
  • Posts: 29
  • Karma: +0/-0
    • View Profile
    • Need songs? :3
Re: FlixelJS [INCOMPLETE]
« Reply #9 on: Tue, Jan 31, 2012 »
Do you intend to finish this? i'm very interested in this ^_^
Waiting is wasting

reacher

  • Member
  • **
  • Posts: 12
  • Karma: +0/-0
    • View Profile
Re: FlixelJS [INCOMPLETE]
« Reply #10 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.

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
Re: FlixelJS [INCOMPLETE]
« Reply #11 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.
blog, twitter, Check out my award winning game, Rot Gut: