Jump to content

Using Phaser with Haxe


Blank101
 Share

Recommended Posts

For those of you that don't know, Haxe is an excellent programming language for developing large JavaScript games (among other things) with features such as static typing, classes, macros, etc. The language is very similar to JavaScript as well, so it won't take much to get started. I encourage you all to give it a look: http://haxe.org/

 

Thanks to the Phaser team's thorough documentation, I've been able to compile Haxe bindings for the Phaser library which can be used within your Haxe games. The library is here if you want to take a look: https://github.com/Blank101/haxe-phaser

 

Or you can just install it via the Haxe package manager:

 

haxelib install phaser

 

Below is a comparison of the syntax on the render text example.

 

JavaScript - https://github.com/photonstorm/phaser-examples/blob/master/examples/basics/06%20-%20render%20text.js

Haxe - https://github.com/Blank101/haxe-phaser/blob/master/examples/rendertext/RenderText.hx

 

Happy coding!

Link to comment
Share on other sites

How does it work under the hood? Does the haxe code get compiled into plain javascript, which then runs alongside the normal Phaser libs? (do you have an example of the JS it generates?)

 

Yes exactly. You can see the output from the render text example here: https://github.com/Blank101/haxe-phaser/blob/master/examples/rendertext/rendertext.js

Link to comment
Share on other sites

Blank101, it seems so good to be true :)

Let me ask you:

How fast do you think you can update this library to keep it hands on with Phaser?

Have you tested this lib with a real game?

I have 2 games I made using Haxe. I will try to convert them to HTML using your library and I will let you know the results.

Regards.

Link to comment
Share on other sites

Blank101, it seems so good to be true :)

Let me ask you:

How fast do you think you can update this library to keep it hands on with Phaser?

Have you tested this lib with a real game?

I have 2 games I made using Haxe. I will try to convert them to HTML using your library and I will let you know the results.

Regards.

 

So far the library is completely built automatically by my other project (https://github.com/Blank101/js2hx). This means getting the library to this state takes close to zero effort. We will see how much manual work needs to be done and I can get you a better answer.

 

I have not tested this with a real game. I've only just tested by copying/pasting phaser examples. A full game conversion would be awesome to help try and find bugs. Thanks. :D

Link to comment
Share on other sites

Blank101,

 

I added the haxe-phaser lib to my openfl install using the conventional method:

haxelib install phaser-haxe

I cloned your example project and I successfully converted the Haxe code into JS code by running the command

haxe -cp . -cp E:\soft\HaxeToolkit\haxe\lib\phaser\0,1,0 -js rendertext.js -main RenderText

where -cp E:\soft\HaxeToolkit\haxe\lib\phaser\0,1,0 is the full path to haxe-phaser.

 

After be sure that all is working fine I tried to figure out how to convert my Haxe game to JS. I have some issues, that I describe below.

 

how do I use the haxe-phaser as backend for HTML5? I mean, which tag do I put in project.xml?

 

I tried 

<haxelib name="haxe-phaser" />

but I got the following error:

Error: Could not find haxelib "haxe-phaser", does it need to be installed?

Either haxe-phaser is not intended to be used this way or I'm missing something. So I skipped this and jumped into my next attempt: the command line.

 

In the command line I issued the command

haxe -cp src  -cp E:\soft\HaxeToolkit\haxe\lib\phaser\0,1,0 -js mygame.js -main com.plicatibu.evenorodd.Main

I got the error message

src/com/plicatibu/evenorodd/Main.hx:3: characters 7-20 : Class not found : openfl.Assets

It seems that I forgot to add the path to openfl source code. Then I updated the command line to

haxe -cp src  -cp E:\soft\HaxeToolkit\haxe\lib\phaser\0,1,0 -cp E:\soft\HaxeToolkit\haxe\lib\openfl\1,3,0  -js mygame.js -main com.plicatibu.evenorodd.Main 

Which caused the following error:

E:\soft\HaxeToolkit\haxe\lib\openfl\1,3,0/openfl/Assets.hx:5: characters 7-27 : You cannot access the flash package while targeting js (for flash.display.Bitmap)src/com/plicatibu/evenorodd/Main.hx:3: characters 7-20 :     referenced here

Looking the source code:

My Main.hx class in line 3 contains

import openfl.Assets;

openfl.Assets refers to file E:\soft\HaxeToolkit\haxe\lib\openfl\1,3,0\openfl\Assets.hx which in its turn declares on lines 5 ~12

import flash.display.Bitmap;import flash.display.BitmapData;import flash.display.MovieClip;import flash.media.Sound;import flash.net.URLRequest;import flash.text.Font;import flash.utils.ByteArray;import haxe.Unserializer;

What's strange about complies regarding flash packages is that they're used in all targets.

My guess: When one uses the lime tool to generate the target it takes care to replace flash package by the ones specific for each platform (what Haxe compiler doesn't do by itself).

 

Could you please tell me how to solve this?

 

Note: In case we have to develop using just Haxe compiler (as in your example), your project is perfect for those targeting just HTML5 (it's much better than using TypeScript IMHO) but it's not that useful for one that wants to use Haxe to target many platforms from the same code base.

 

Regards.

Link to comment
Share on other sites

Blank101,

 

I added the haxe-phaser lib to my openfl install using the conventional method:

haxelib install phaser-haxe

I cloned your example project and I successfully converted the Haxe code into JS code by running the command

haxe -cp . -cp E:\soft\HaxeToolkit\haxe\lib\phaser\0,1,0 -js rendertext.js -main RenderText

where -cp E:\soft\HaxeToolkit\haxe\lib\phaser\0,1,0 is the full path to haxe-phaser.

 

After be sure that all is working fine I tried to figure out how to convert my Haxe game to JS. I have some issues, that I describe below.

 

how do I use the haxe-phaser as backend for HTML5? I mean, which tag do I put in project.xml?

 

I tried 

<haxelib name="haxe-phaser" />

but I got the following error:

Error: Could not find haxelib "haxe-phaser", does it need to be installed?

Either haxe-phaser is not intended to be used this way or I'm missing something. So I skipped this and jumped into my next attempt: the command line.

 

In the command line I issued the command

haxe -cp src  -cp E:\soft\HaxeToolkit\haxe\lib\phaser\0,1,0 -js mygame.js -main com.plicatibu.evenorodd.Main

I got the error message

src/com/plicatibu/evenorodd/Main.hx:3: characters 7-20 : Class not found : openfl.Assets

It seems that I forgot to add the path to openfl source code. Then I updated the command line to

haxe -cp src  -cp E:\soft\HaxeToolkit\haxe\lib\phaser\0,1,0 -cp E:\soft\HaxeToolkit\haxe\lib\openfl\1,3,0  -js mygame.js -main com.plicatibu.evenorodd.Main 

Which caused the following error:

E:\soft\HaxeToolkit\haxe\lib\openfl\1,3,0/openfl/Assets.hx:5: characters 7-27 : You cannot access the flash package while targeting js (for flash.display.Bitmap)src/com/plicatibu/evenorodd/Main.hx:3: characters 7-20 :     referenced here

Looking the source code:

My Main.hx class in line 3 contains

import openfl.Assets;

openfl.Assets refers to file E:\soft\HaxeToolkit\haxe\lib\openfl\1,3,0\openfl\Assets.hx which in its turn declares on lines 5 ~12

import flash.display.Bitmap;import flash.display.BitmapData;import flash.display.MovieClip;import flash.media.Sound;import flash.net.URLRequest;import flash.text.Font;import flash.utils.ByteArray;import haxe.Unserializer;

What's strange about complies regarding flash packages is that they're used in all targets.

My guess: When one uses the lime tool to generate the target it takes care to replace flash package by the ones specific for each platform (what Haxe compiler doesn't do by itself).

 

Could you please tell me how to solve this?

 

Note: In case we have to develop using just Haxe compiler (as in your example), your project is perfect for those targeting just HTML5 (it's much better than using TypeScript IMHO) but it's not that useful for one that wants to use Haxe to target many platforms from the same code base.

 

Regards.

 

Couple of things:

 

1. haxelib install phaser NOT haxelib install phaser-haxe

 

2. These are JavaScript externs which allow you develop a game only for the JavaScript target of Haxe. This project has nothing to do with OpenFL and you cannot use it in any way to compile to multiple targets.

 

3. To build an HTML5 game using Haxe with Phaser you write all the code in Haxe then compile it all to a single JavaScript file (in the case of the RenderText example the output would be rendertext.js). After that you can use the outputted JS file as you would any other Phaser game by including it from an html file. For example: https://github.com/Blank101/haxe-phaser/blob/master/examples/rendertext/index.html

 

Let me know if you have any further questions.

Link to comment
Share on other sites

Ops.

 

I missed a point. I thought it would be a new backend for openfl. My bad! :(

 

Anyway, as I said in my last post, it's much better to develop in Haxe and use haxe-phaser than TypeScript.

 

As we can call Phaser API as Haxe classes I believe it will be a breeze to develop the games. :)

 

I'll make a small game in Haxe (without any openfl library) and see if everything compiles fine.

 

Regards.

Link to comment
Share on other sites

Ops.

 

I missed a point. I thought it would be a new backend for openfl. My bad! :(

 

Anyway, as I said in my last post, it's much better to develop in Haxe and use haxe-phaser than TypeScript.

 

As we can call Phaser API as Haxe classes I believe it will be a breeze to develop the games. :)

 

I'll make a small game in Haxe (without any openfl library) and see if everything compiles fine.

 

Regards.

 

Awesome! Let me know how it goes.

Link to comment
Share on other sites

Blank101, I'm doing some tests with haxe-phaser and I saw that Phaser class is defined as an external class in Phaser.hx file.

 

So far, so good. The point is that it doesn't contain any attribute inside it, so one cannot use, say Phaser.AUTO.

 

I manually added the line 

public static inline var AUTO:Int = 0;

in Phaser class and it worked like a charm.

 

My doubt: can you modify your script that generates haxe classes from JavaScript sources in order to add these declarations in the Phaser.hx file?

 

Thank you.

Link to comment
Share on other sites

I'm very interested in seeing haxe-phaser working on so I'm scrutinizing it as much as I can.

 

I stumbled upon a new issue:

 

The Easing class has duplicated field declaration (Out function).

 

The Easing.hx content:

package phaser.tween;@:native("Phaser.Easing.Bounce")extern class Easing {    function In  (k:Float):Float;    function Out  (k:Float):Float;    function InOut (k:Float):Float;    function Out (k:Float):Float;}

In the original file (Easing.js) one has two functions with identical signatures but different implementations (I'm showing the bare minimum)

    Quadratic: {        /**        * Ease-out.        *        * @method Phaser.Easing.Quadratic#Out        * @param {number} k - The value to be tweened.        * @returns {number} k* (2-k).        */        Out: function ( k ) {            return k * ( 2 - k );        },    },    Cubic: {        /**        * Cubic ease-out.        *        * @method Phaser.Easing.Cubic#Out        * @param {number} k - The value to be tweened.        * @returns {number} The tweened value.        */        Out: function ( k ) {            return --k * k * k + 1;        },    },

The script didn't noticed that each Out function is inside a namespace.

 

Do you mind if we keep talking about my future finds by email (so we don't pollute this thread) or do you prefer to keep talking here?


 

Link to comment
Share on other sites

  • 2 weeks later...

I love haxe language and I loved the haxe-phaser project. Unfortunately my knowledge doesn't allow me to contribute directly to it.

 

So I create a project named haxe-phaser-examples. It consist of ports of the official Phaser examples to Haxe.

 

Its objective is to help me to find bugs on haxe-phaser project. As soon as I find a bug I report it to haxe-phaser maintainer.

 

If you feel like, please, consider porting some samples to Haxe and help me to test how mature haxe-phaser project is.

 

Note: not all examples in haxe compile. It's due bugs in haxe-phaser (most of the time). As it's maintainer fix them I run tests again.

Link to comment
Share on other sites

  • 2 months later...
Hi,

 

@plicatibu and @Blank101,

 

I'm really interested to develop games with Phaser using Haxe and would like to know if you still maintain your haxe-phaser externs and your haxe-phaser examples ? I haven't seen any updates since 2 months on the master branch ?

I was wondering what do you use to code Phaser with Haxe ?

I'm using FlashDevelop and the organisation of the files, of the projects are differents from yours, it seems to me that you don't use FlashDevelop. Do you think it could be interesting to give users examples organized to be easily compiled with FlashDevelop ?

 

Thanks for your advices.
Link to comment
Share on other sites

  • 1 month later...

Hello,

I created fork popular phaser tutorial https://github.com/tutsplus/Monster-Wants-Candy-demo
I used Flash develop and Haxe-phaser: https://github.com/AGulev/Monster-Wants-Candy-demo
I hope, it can help

 

 

Hi,
 
@plicatibu and @Blank101,
 
I'm really interested to develop games with Phaser using Haxe and would like to know if you still maintain your haxe-phaser externs and your haxe-phaser examples ? I haven't seen any updates since 2 months on the master branch ?
I was wondering what do you use to code Phaser with Haxe ?
I'm using FlashDevelop and the organisation of the files, of the projects are differents from yours, it seems to me that you don't use FlashDevelop. Do you think it could be interesting to give users examples organized to be easily compiled with FlashDevelop ?
 
Thanks for your advices.

 

Link to comment
Share on other sites

 

Hi,
 
@plicatibu and @Blank101,
 
I'm really interested to develop games with Phaser using Haxe and would like to know if you still maintain your haxe-phaser externs and your haxe-phaser examples ? I haven't seen any updates since 2 months on the master branch ?
I was wondering what do you use to code Phaser with Haxe ?
I'm using FlashDevelop and the organisation of the files, of the projects are differents from yours, it seems to me that you don't use FlashDevelop. Do you think it could be interesting to give users examples organized to be easily compiled with FlashDevelop ?
 
Thanks for your advices.

 

 

Sorry about the delayed response. I didn't realise that replies to this topic wouldn't trigger some notification.

 

I am still maintaining the code base and am actively using it for my own projects (which are mostly closed source atm). I actually do use FlashDevelop for Haxe, but I just don't usually like to include IDE-specific files in my git projects.

 

AGulev has done a nice job with porting the Candy demo so I would work off that.

Link to comment
Share on other sites

Sorry for the long delay to answer.

 

I'm not updating my project because a lack of time.

 

I hope to start updating it in the future.

 

 

 

Hi,
 
@plicatibu and @Blank101,
 
I'm really interested to develop games with Phaser using Haxe and would like to know if you still maintain your haxe-phaser externs and your haxe-phaser examples ? I haven't seen any updates since 2 months on the master branch ?
I was wondering what do you use to code Phaser with Haxe ?
I'm using FlashDevelop and the organisation of the files, of the projects are differents from yours, it seems to me that you don't use FlashDevelop. Do you think it could be interesting to give users examples organized to be easily compiled with FlashDevelop ?
 
Thanks for your advices.

 

Link to comment
Share on other sites

  • 2 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...