HTML5 Toolset?



  • Hello all!

    I’m starting to get into HTML5 game development. I’m coming from a Unity, C#, C++ background and I’m looking for advice on toolsets, frameworks, toolkits, and essential tools that I could use for authoring HTML5. At the moment, I’m using Notepad++ as an IDE.

    The answer here by no means needs to be a complete list, but some ideas about what toolsets or IDEs people use would be great to kickstart me in the right direction. It seems like there are sooooo many things available in this Javascript world of the web.

    Appreciate any advice up front, hopefully others can benefit as well! Thanks!
    Josh



  • @Ralkarin tl;dr: No essential IDEs, but Chrome’s Developer Tools are incredibly helpful ( https://developer.chrome.com/devtools ). There are some great resources for learning JS.

    Notepad++ will work just fine. For writing JS, there’s no essential IDEs like there are for other languages (e.g., XCode for iOS dev). I use VIM; a lot of developers like Sublime ( http://www.sublimetext.com/ for OSX) or Notepad++ for windows. The feedback loop can be much faster and tighter than it is for compiled languages - save then refresh your browser (or if you’re using something like livereload, you don’t even need to refresh the page).

    For getting into HTML5 dev, I’d recommend learning more about JS and the DOM as a whole before trying to build a full fledged game. With your background it sounds like you won’t have a problem picking it up (and you can always ask if you do!:D). I’d recommend checking out http://eloquentjavascript.net/ as a good intro / overview of JS (you even build a game if you follow the book). After that, I’d highly recommend a slightly more advanced book: http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752 and lastly http://braythwayt.com/2013/10/01/javascript-allonge-is-free (this one is really great, and it takes a more functional approach)

    Although it’s not essential, Google Chrome’s dev tools are incredible. A good intro: https://developer.chrome.com/devtools . Firefox is making a lot of improvements as well, but I find Chrome’s to be a great fit for me. There is also a robust timeline ( https://developer.chrome.com/devtools/docs/timeline ) and profiler ( https://developer.chrome.com/devtools/docs/cpu-profiling ). Good luck!


  • Patron

    And… of course, don’t forget a copy of MY book about HTML5 game dev:
    http://www.crcpress.com/product/isbn/9781466594005

    Or Amazon if you prefer:
    http://www.amazon.com/HTML5-Game-Engines-Development-Distribution/dp/1466594004/

    ;-)



  • Awesome stuff guys! I’ve found Chrome so far to be a great tool (primarily for learning, inspecting other stuff), so good advice. I get what you’re saying about the IDEs, I think project management was more of what I was interested in, but I guess a folder structure in Windows Explorer is just as useful.

    Appreciate the links to the books, I may have to pick a few of those up or read them online to supplement as I go. Gonna check em out!

    Thanks for the thoughtful reply! :)


  • LDG

    @Ralkarin I haven’t used a lot of Notepad++ but Sublime Text does give you quite a bit of project management. Aside from the explorer style nav bar, it has great file navigation and file searching capabilities. Sublime also supports custom packages so there’s a quite a few custom additions (such as Git support) that make things even easier.


  • LDG

    After feeling a bit comfy with JavaScript, maybe breeze through our little tutorial and see if the tech makes you happy. If it does, either start building a tiny game from scratch, or use Phaser, which is quickly becoming the go-to HTML5 game engine. My two cents; have fun!

    @Enoex said:

    I use VIM

    Awesome, a fellow vimmer! Feels rare these days.



  • Awesome. Thanks for the tutorial link, gonna run through it for kicks. :)
    I’ve seen Phaser, considered learning it too. With so many different engines and things, it’s good to hear from some insiders about what’s good/useful/standard/etc.
    Perhaps, I’ll give Sublime a try, I recall a friend using it for web-based development as well. Thanks!

    So, one other question, and this one could be a can of worms.
    At the “suggestion” of a potential client, the recommendation of using HAXE came up, due to interest in porting the same games to native Android/iOS apps along with web based HTML5 browser support. I’m a fan of authoring once and publishing to many places (I come from Unity, maybe I’m spoiled). :)
    I’m reviewing all of the technology in this stack, and HAXE with Flambe seems to be a growing trend for this, with pretty good performance results.

    Any thoughts on HAXE -> HTML5 support? Good idea? Terrible Idea? Growing trending or downward spiral?


  • LDG

    We’ve seen some contracts that required Haxe and it looks like pretty good tech. It seems worth checking out but I haven’t used it myself.



  • Very cool, I appreciate all of the advice. Thanks again!



  • You can also consider Light Table:

    http://www.lighttable.com

    It’s particularly good for HTML5 development because it lets you completely integrate Chrome Dev tools into the editor.
    That means you don’t have to jump back an forth between Chrome and your editor, and you get instant feedback on runtime errors.
    For learning, it’s maybe the best place to start.

    That said, I’m an old-skool Vim user on day-to-day basis.
    I love Vim, but I have to admit it is kind of like a hobby; like maintaining a vintage car.
    (Light Table gives you optional Vim keybindings by the way, which is the best part of Vim)

    Haxe and OpenFL are brilliant, getting better all the time, and have a fast growing user community.
    In fact, if you have Flash experience (I do, 15+ years) I’d consider using it for HTML5 game development over raw JS coding.
    The Flash API is extremely well designed and battle-proven, and is all you need to start making games.
    If you code in raw JS, you pretty much have to use a game engine (like Phaser), a good rendering engine (like Pixi) or start building your own from scratch (like me: https://github.com/kittykatattack/ga).
    If you’re using Haxe/OpenFL, all those essential components are built for you, and you can start making games right away.

    In 2014, HTML5 is not a development platform, it’s a compile-to target.
    That means you can pretty well use any development platform or programming language you like and just compile to HTML5 when you’re done :)


Log in to reply