Jump to content


  • Content Count

  • Joined

  • Last visited

Reputation Activity

  1. Sad
    viso got a reaction from webdva in What was your most complex html5 game ?   
    Uf brutal, but thx for sharing
  2. Like
    viso got a reaction from Alexalten in Action RPG pack   
    i recognized the assets from the game flare
    image assets are here https://github.com/clintbellanger/flare-game/tree/master/art_src
    also that guy Clint Bellanger has a page on opengameart.org
    i am also using them in my game.
    the images are definitely older then 2015 so i guess Clint Bellanger is the author.
  3. Like
    viso reacted to Bikas in Postmortem: Medieval Defense Z   
    Hello everyone, 
    Recently i finished my first medium-sized HTML5 game - Medieval Defense Z.
    I came from flash background and developing for HTML5 presented with some new challenges. So i would like to share what worked and what didn't.
    This is more like review/tutorial type of thing, so hopefully someone will find something useful.
    • Goals:
        • 60fps.
        • Smooth gameplay and animations.
        • Quality comparable to flash games.
    • Tools:
        • Language: Haxe. Strictly typed programming language, similar to ActionScript 3.0. Compiles to all major languages, including javascript.
        • Editing: HaxeDevelop IDE. Freeware, great code completion and very fast compared to everything i tried.
        • Debugging: Chrome. Has console, debugger and profiler.
        • Rendering library: Pixi.js. Uses display list concept like flash. Works well.
        • Sound library: Howler. Good enough, the id system is a bit weird though.
        • Bitmap font exporter: http://kvazars.com/littera/. Free and web-based.
        • Sprite Sheet Packer: https://spritesheetpacker.codeplex.com/. Freeware and very simple.
    • Graphics:
        • Scaling will look ugly if you use many small png files for textures.
        • If you want nice scaling, fast load times and fast rendering - pack everything to 2048x2048 spritesheets (include bitmap fonts too).
        • Resolution of assets: 1024x768, background can extend to 1382x768, so it covers most aspect ratios in horizontal orientation.
        • To get proper native resolution in mobile browsers i scaled up renderer and scaled down canvas by window.devicePixelRatio.

    • Sounds:
        • Library: Howler.
        • Sound formats: ogg for Chrome and Firefox, m4a for Safari and Internet Explorer (note: mp3 has licensing issues with play count).
        • ffmpeg: because of licensing issues and whatnot can't convert to m4a, unless you recompile ffmpeg with m4a, which is a pain to setup.
        • I used MediaHuman Audio Converter (freeware) to convert from wav to ogg and m4a (64 bit).
        • iOS Safari: keep in mind that before any sound could be played, user must first tap on the screen.
    • Mouse Events:
        • Used pixi.js API to open links.
        • iOS Safari: window.open under "touchstart" event won't open links in new tabs, use "tap" event instead.
        • sprite.on("mousedown", callback) for desktop.
        • sprite.on("tap", callback) for mobile.
    • Performance:
        • Reuse frequently used sprites.
        • Avoid creating too many objects every frame.
        • I would recommend looking up data-oriented programming to get more juice out of Javascript.
        • Record timeline with Chrome profiler to find performance bottlenecks.
        • Masks are slow. Use trim if you only need a simple cut.
        • Very large functions may cause lag spikes. My best guess is that browser is trying to optimize the function. Splitting big function into several smaller ones solved my problem.
    • Game Debugging:
        • Simple CSS + DOM side menu.
        • Basic field view/edit.
        • Simple buttons with callbacks.

    • How to debug html5 game on android (mobile) with desktop chrome (PC):
        1. Upload game to your website.
        2. Go to (desktop) chrome: chrome://inspect
        3. Connect Android device with USB and run your game on android chrome (your android device must be enabled for development).
        4. Open Command Prompt and enter: adb devices (must have Android Debug Bridge installed).
        5. To quit debugging enter: adb kill-server
    • Conclusions:
        • Programming in Haxe instead of pure Javascript probably saved hours and hours of debugging.
        • Would have liked more automated solution for spritesheet and sound stuff.
        • Poor performance bites sooner or later, so be prepared to do extensive profiling.
        • Stable 60fps is very hard to achieve, even if you keep your code below 1-2ms per frame.
        • Overall i am happy with the results, however it took longer than expected to make this game.
    Any feedback is appreciated.
    Game Link: http://html5games.vooxe.com/a90bd3f1fba643828ccfb0109b41a252/index.html

  4. Like
    viso reacted to Schaukelking in [Phaser] SpaceBear   
    haha, yeah. thats what we want. frustration.
  5. Like
    viso reacted to ForgeableSum in Strike Tactics: A futuristic RTS made with Phaser.io   
    Official Trailer: 
    Learn more:
    Official strike tactics website.
  6. Like
    viso got a reaction from jpdev in [WIP] isometric diablo style aRPG   
    Latest version always here
    Play only with keyboard and mouse.
    Without a name or a proper design document i started to create an diablo clone in browser.
    I am working alone, i didn't use any framework but instead used scala.js which compiles to javascript.
    Its just a side project, working on this on weekends and nights (if i dont play something else haha ).
    Image assets are mostly from this guy http://opengameart.org/users/clint-bellanger
    Its probably not the typical html5 game
    Not 100% sure if i finish it (at least at some degree) but it will be for free anyway.
    I am planing to do a rich skill tree, no inventory, stats boost drops, skills acquired from boss enemies.
    The hero is a mage + necromancer. 
    At this point its kind of playable but everything is in test state (one test enemy, one test npc, one test map ... )
    let me know if you have performance problems ( if so, mention your OS and browser )
    Also what do you think about the idea.
    Thx Viso.
  • Create New...