viso

Members
  • Content count

    12
  • Joined

  • Last visited


Reputation Activity

  1. Alexalten liked a post in a topic by viso in Action RPG pack   
    i recognized the assets from the game flare
    https://github.com/clintbellanger/flare-game/tree/master/art_src
    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.
  2. viso liked a post in a topic by 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.
        
    • 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.
        • Pixi.js is great, but i wouldn't recommend doing very complex scenes.
        • 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.
    The game is not yet released, but here is gif trailer:

  3. viso liked a post in a topic by Schaukelking in [Phaser] SpaceBear   
    haha, yeah. thats what we want. frustration.
  4. viso liked a post in a topic by feudalwars in Strike Tactics: A futuristic RTS made with Phaser.io   
    Official Trailer: 
     
    Learn more:
    http://striketactics.net/about
     
    Official strike tactics website.
  5. jpdev liked a post in a topic by viso 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.