[solved] HTML5 debugging and Chrome



  • Hi guys.

    Basically, I'm testing out platforms and such. Wanted to see if my game (devlog on haxeflixel here) would be feasible for HTML5. Compiles fine but when it tries to run, gets stuck at the preloader.

    I'm afraid the code might have exploded on my end, but I've got no idea how to see that. I am using FlashDevelop, is debugging possible, or is there a way to see what went wrong?

    Any tips on this would be incredible helpful. Thanks!


  • administrators

    Check the JS console for runtime errors (F12).



  • Hey Gama, thanks for your help, I compiled on debug mode, and the console is giving me nothing :(

    Build succeeded
    Done(0)
    Web Server starting with root: E:\SETENTIA_DATA\PROJECTS\KenneyRevenge\export\html5\bin
    Running process: http://localhost:2000/
    

    ... and that's it. A bar fills up, and then gets stuck there. Not sure what would cause the game to be stuck at that moment.


  • administrators

    I meant the JavaScript console, in the browser. Not FlashDevelop's output panel.



  • Sorry if this is unnecessary, but if OP doesn't know it will surely be helpful.
    To open the console (in browser):
    Chrome - Ctrl+Shift+I and then click Console
    Firefox - Control-Shift-K



  • Oh, awesome! Followed the instructions. Apparently, is a font problem, indeed forgot the .woff versions of them.

    I'm surely now can work my way out of this. Thanks guys!


  • administrators

    In case you are talking about these two lines:

    They show up with every Flixel game (just check one of the demos, Mode is still working fine despite these) and are not an issue.



  • That's good to know and actually good reference, had to find it the hard way :)

    I had multiple problems which prevented me from loading, mostly with unnecessary assets being loaded. Solved those... and works fine on Firefox, but not on Chrome.

    For what I've read, Chrome doesn't like a lots of things.

    My game mostly relies on .TMX files for the maps and they won't load on Chrome. To discard possible issues on my project, I tried both the RPGTutorial and the TiledEditor demos and they don't work on HTML5 on Chrome. Just by including a .tmx file on the assets path will prevent it from working.

    While Chrome plans to kill Flash, imposes lots of limitations on HTML5. I'm not supposed to use flash but my game won't work on chrome. Besides mobile and windows, there's a big chance my game won't be available for web... So... a bit stuck and confused. ;(


  • administrators

    What happens when you emebd the .tmx files? Something like

    <assets path="assets" exclude="*.tmx">
    <assets path="assets" include="*.tmx" embed="true">
    


  • You can also include text files directly into code as strings with a simple Haxe macros.
    Didn't do it with files myself yet, but asking Git for current status and including it in the source works fine:

    package build;
    
    #if macro
    import sys.io.Process;
    #end
    
    class BuildInfo 
    {
    	macro public static function buildDate()
    	{
    		var ret = Date.now().toString();
    		return macro $v{ret};
    	}
    
    	macro public static function gitVersion()
    	{
    		var branch = new sys.io.Process("git", ["rev-parse", "--abbrev-ref", "HEAD"]).stdout.readLine();
    		var version = new sys.io.Process("git", ["describe", "--always"]).stdout.readLine();
    		var ret = version + "-" + branch;
    		return macro $v{ret};
    	}
    }
    

    All you need then is to import Build.BuildInfo and to call one of the functions.
    Hope this helps!


  • administrators

    @starry-abyss I think that's more or less what OpenFL does with embed="true", so that'd be a bit redundant.



  • @Gama11 Tried embed="true" for one of my projects with html5 target. It copied just the same assets folder to export, without which the game is a black screen.
    I also always thought that embed="true" is about embedding into apk or swf. No?


  • administrators

    @starry-abyss Hm, yeah, looks like embed="true" might simply not be implemented on HTML5. @:file should still work though (see here - OpenFL makes these metadatas work cross-platform).

    And apart from that, I don't have any issues running the HTML5 version of the TiledEditor demo in Chrome or Firefox.



  • Well, I'm still confused that it would work for both of you guys.

    I tried the TiledEditor with the embed option, and still doesn't work:

    alt text

    My Chrome is the latest one.

    Here's my libraries installed:

    actuate: [1.8.6]
    box2d: [1.2.3]
    flixel-addons: [2.0.0]
    flixel-demos: [2.1.0]
    flixel-templates: [2.0.1]
    flixel-tools: [1.1.2]
    flixel-ui: [2.0.0]
    flixel: 4.0.0 [4.0.1]
    hscript: [2.0.5]
    hxcpp: [3.2.205]
    hxtelemetry: [0.3.3]
    layout: [1.2.1]
    lime-samples: [2.6.0]
    lime: [2.9.0]
    nape: [2.0.19]
    openfl-samples: [3.3.1]
    openfl: [3.6.0]
    

    I am using openfl: [3.6.0] because of flixel-ui is not working on the later version. Might be because of that?

    PS: I edited the topic title to add 'Chrome', in case other people bumps into the same issue.


  • administrators

    It looks like you're manually opening the index.html? That won't work because of JS security restrictions (can't load files from the local file system). This is why a local webserver is required to test the HTML5 target.

    Both FlashDevelop and lime test html5 have that built-in and should open it at localhost:2000 / localhost:3000 automatically already.



  • Oh my goodness, it works! Thanks a lot for your invaluable information!

    I had set Firefox to open automatically after a compilation. It indeed it opened localhost:2000. So, what I did was simply go to localhost:2000 on Chrome and worked.

    Thanks again, and sorry for my newbie HTML5 mistakes :heart_decoration:


Log in to reply