Html5 Tools of Trade

[scheffgames]

Here's a list of the tools I use daily for game creation, coding, animation, etc. I hope you'll find some useful info, let's begin.

Art and Animation

##########################################################################

Photoshop: The daddy and mommy of raster editing. I've tried lots of alternatives over the years but I always came back to it. Even though it's not a specialized tool (creating pixel art for example) I've found that it's quite flexible and it allows you to work on a variety of project types. 

I USE IT FOR:

• Text manipulation, logos, etc. 
• GUI creation - shape tools and the alignment tools come quite in handy. Add effects (strokes, shadows, etc) and you're golden.
• Overall finishing touches. Playing with curves,intensity, blending modes to give my graphics that extra visual boom.

ALTERNATIVES:

GIMP: Also called the poor's man Photoshop. It's a pretty decent and powerful program and it has many of the features offer by it's more expensive brother Photoshop. I gave it multiple spins over the time and I was disappointed in the GUI arrangement and the overall workflow.

Asesprite,  Pyxel Edit, Graphics Gale: These are 3 different pixel art creation software packages. I don't do pixel art and I only tried them for a short amount of time but I hear good things about them. 

##########################################################################

Illustrator: One of the most famous vector editing programs out there and rightly so. First of all it's an Adobe product so you have good integration with other Adobe products (such as Photoshop) and a certain level of quality. Although it's a bit tricky to get into it at first it's really worth it - there's nothing more powerful out there in terms of vector editing (as far as I know) and you can really create some awesome art for your games.

ALTERNATIVES:

Corel Draw: Altough I am a big fan of PainterX (digital painting at it's best from Corel) I'm not so taken aback with Corel Draw. Obviously you can create artwork in it but I had the sensation that it is more geared towards desktop publishing. It's a good product all in all but you should rather take the time to learn Illustrator - it will be worth your time.

Inkscape: This is a free vector editing software and you would probably expect it to be bad in some way. It's really not. Very easy to learn and with an intuitive workflow it allows you to create art simple and fast. True, it lacks the sophistication of Illustrator but it's the perfect choice for a beginner artist - the guy behind game art for programmers uses it extensively so he must know something. 

##########################################################################

Moho: IMHO the best 2d skeletal animation software out there. The only decent competitor out there is Toon Boom but it lacks in the bone setup area and it's mainly focused on frame by frame animation. Spine it's simple and intuitive but it lacks the power required for more complex setups ( it also lacks vector drawing). It's only drawback is that it can't import properly .psd's and .ai's but it compensates by having it's own (very powerful and sometimes more intuitive than Illustrator) vector drawing tools. Oh, and I mentioned that it also has particles? Motion Blur? Z Depth layer ordering and animation? IK animation? Animation Morphs (like the ones you can find in Maya)?Smart Bones? Animated strokes? 3d capabilites? You get it, I'm hooked.

I USE IT FOR:

• Character and prop creation
• 2d Animation

ALTERNATIVES:

Spine: A lightweight 2d skeletal animation program. Intuitive and friendly especially for artists that are new to animation.

ToonBoom: This is Moho's main competitor as it has similar complex animation tools. It has a steep learning curve and it offers lots of features in terms of animation. I think it is more geared toward animation movies rather than games but you can definitely create great art and animation in it if you invest in learning it.

Adobe Animate:Adobe's 2d animation flagship product. Since it's Adobe you know you'll get tight integration with other products from the Adobe Suit (Photoshop, Illustrator) and a certain standard of quality. One thing I liked about it was the particle creation capability and the large variety of brushes. Although it's a bit weak in the area of rigging and bones (specially compared to Toon Boom or Moho) it is a powerful and complete piece of software so it might be worth your time.

##########################################################################

Cinema4D: Altough I've been infatuated with Maya I've come to love this friendly 3d editing software. Why? Because it just works. It works fast, it works good and it's easy to learn even for 3d noobs.

I USE IT FOR:

• 3d Text creation 
• Various object renders

##########################################################################

Lightroom:The best photography catalogue out there. I had 50 thousand photos once (paintings pics mostly) and other similar programs died just trying to read them. Not Lightroom. How can a dev might use it? For me it's useful when I gather lots of art inspiration from various websites, games, etc and I can browse and rate them with ease and pleasure.

I USE IT FOR:

• Inspiration Management

##########################################################################

SqCheck:A nifty little utility that allows you to preview rendered frames (sequenced) of animation at various speeds. It might not seem as much but it's much easier to focus on the animation final result without all the clutter of a big animation program. I can spot common mistakes quite easily - like having too much static extra frames at the end of an animation (like having a walk cycle and the foot stays just a bit too much at the end of animation). Or I can load it each third or second frame sequence to see how it looks without all that interpolation in between (because smaller spritesheets and snappier animation - Richard Williams said in it's incredibly inspiring animation book - The Animator's survival kit.

I USE IT FOR:

• Animation final touches

##########################################################################

Timeline Fx: A particle editor for all your particly needs. Explosions, flames, bubbles, etc. It has the best blend of usability and ease of use. Another particle editor beast that I like it's Particle Illusion  - altough you can create the same particle effects with the standard particle properties (particle life, velocity, lifeOverSpeed, etc) it really shines at particle assembly - you can combine multiple particle effects, animate them, create deflectors/blockers/wind, clip them to alpha masks, etc. 

I USE IT FOR:

• 2d Particle creation and FUN

##########################################################################

Irfan View: An image viewer that can cook, clean and take out your garbage. Well, maybe not but it does have a motherload of options and it supports a large variety of image formats (.psd, .tiff). It even reads .txt for god's sake. My favourite shortcut in Irfan View is Shift + 1. It opens your image in a predefined application - you guessed it, Photoshop. And it's very fast.

I USE IT FOR:

• Image viewing and fast access to Photoshop.

##########################################################################

Programming

 

##########################################################################

Sublime Text: "The text editor you'll fall in love with" - says in the website title. Well I did...over the heels. Coming from a C# background I was used to Visual Studio - awesome IDE, ideal for large projects and with lots of little helpful features. Sadly using JS in Visual Studio it's a drag. Intellisense it's basically useless, go to code definition doesn't work well most of the time, starting it takes quite some time. Sublime Text to the rescue. Lightweight, uber customizable, lightning fast, works like a charm with JS. I recommend installing JS Hint for linting and Js prettify to make your code readable. Also learn some general shortcuts for a better workflow. And if you really wanna fly in it learn either Emacs or Vim shortcuts (it has plugins for both). I used Emacs first - a bit too heavy and a carpal tunnel risk. Switched to Vim and after the rather abrupt learning curve I feel much more comfortable. And if you really wanna protect your hands and increase your touch typing speed I'd reccomend switching from Qwerty keyboard layout to Dvorak.

##########################################################################

Phaser: Html5 game framework. Why? You probably know why since you're on this forum so you're probably a dev yourself. Easy to learn, quite powerful, good performance.

##########################################################################

Other

##########################################################################

Sprite Sheet Exporter Photoshop Script: Altough you can create spritesheets directly from many 2d Animation programs I find it it allows for much flexibility to import sequenced frames in Photoshop (using File > Scripts > Load Files into Stack) and doing various refinements -I usually  get rid of all transparent pixels with Image > Trim and apply various color corrections - this will be my master animation document. After that I can resize it to fit my needs (can happen multiple times during the life of a project) and export it to a sprite sheet with the Exporter script. 

##########################################################################

Audacity: Simple yet powerful sound editing software. While I can't create music/sfx by myself I can greatly improve it by mixing it, fading in/out, applying various effects. 

##########################################################################

AutoHotkey: A nifty little utility for Windows that allows you to remap various shortcuts, exe paths and other commands to custom keyboard bindings. It increases the workflow speed enormously and it makes a working day more pleasant. Imagine double clicking on Photoshop.exe 30 times a day. It might not seem much but if you're in another application you'll have to minimize it and hunt the icon on desktop - it interrupts the creative process and takes a bit of time. It's much easier just to press a combo keyboard shortcut (mine it's Ctrl + R) and there pops Photoshop. Or my current working folder. Or sublime Text. Try it - you'll love it. 

##########################################################################

Wamp: Web Development Environment. You'll need it to develop Html5 games and it's very easy to install and use.

##########################################################################

Sumatra Pdf: For all your pdf reading needs - programming, animation and design books. First it was Acrobat reader and it was good but then it got bloated and sluggish. Then it was Foxit and it was so much faster than Acrobat Reader but then it got bloated and sluggish. Now it's Sumatra and altough it's simple it's very fast and it supports .mobi and .pdf. Let's hope it stays clean.  

##########################################################################

Various Online Tools

 

##########################################################################

Tiny Png: Incredible png compression with very little quality loss (if any). I even saw 90-95 percent file reduction on my png's - that's going from 1 MegaByte to 50 KiloBytes - pretty impressive)

##########################################################################

Trello: Task management and collaboration. I heard good things about it but I think it's better suited for larger projects and I still prefer to keep track using pen and paper.

############################## @Goblet Ed##################################

draw.io: "draw.io is completely free online diagram editor built around Google Drive that enables you to create flowcharts, entity relation, mockups and more. Your data is stored only in Google Drive, so no additional third-party to trust with your data (or extra accounts)." It has good object snapping which makes placing and aligning things very pleasant.

##########################################################################

I USE IT FOR:

• Creating screen flowcharts
• One page designs
• Level designs (can import your sprites)

############################## @Goblet Ed##################################

Coggle.it: Pretty mind-mapping tool.

I USE IT FOR:

• Creating pretty mind maps to organize new information

##########################################################################

 

***************************************************************************************************************************************

Feel free to contribute in comments (link and your personal experience) and I'll try to keep this updated -

just tools and utilities please, there are lots of resources lists already.

 

***************************************************************************************************************************************

[Filou]

Great Post. Thanks for sharing your tools 

[Goblet Ed]

NIce! A couple of programs here I never heard of that look mighty useful.

Got one myself which I often use:

draw.io: "draw.io is completely free online diagram editor built around Google Drive that enables you to create flowcharts, entity relation, mockups and more. Your data is stored only in Google Drive, so no additional third-party to trust with your data (or extra accounts)." It has good object snapping which makes placing and aligning things very pleasant.

##########################################################################

I USE IT FOR:

• Creating screen flowcharts
• One page designs
• Level designs (can import your sprites)

##########################################################################

Coggle.it: Pretty mind-mapping tool.

I USE IT FOR:

• Creating pretty mind maps to organize new information

##########################################################################

[scheffgames]

@Goblet Ed Thank you, post updated!

[Inlogic Software]

Great overview of a useful tools, thanks guys! 

[nicloay]

Here is one more really cool sequence diagram editor https://www.websequencediagrams.com/

You can use it fi you want to design how entities works (send messages and call methods) with each others.

[Firenibbler]

Check out the Brackets code editor, its great for web programming and I use it for all of my programming.

[mattstyles]

On 08/03/2017 at 0:19 PM, nicloay said:

really cool sequence diagram editor

"really cool" and "sequence diagram editor", two phrases you dont normally hear together! 

[Kitanga Nday (NDAY Games)]

Visual Studio Code, really amazing open source editor. Brought to you by Microsoft. Comes with many features such as Key Maps from other editors (so you can have sublime text key maps in vs code), GIT is implemented right in there (you can commit, switch between branches, see file history, stare at vs code in awe, all without the CLI), there's also a terminal built into the editor which can also be edited (i.e. you can make it use Git Bash instead of Powershell/Command Prompt.), amazing themes you know and love, extensions, and it's built using web technology (html, css, javascript, and some Electron magic). So yea, vs code's pretty awesome.

[Kitanga Nday (NDAY Games)]

GitHub or BitBucket (Comes with free private repos, also just acquired Trello. Looking forward to how they work together) for not just storing stuff as back up but also version control.

LMMS for creating music. Great alternative to FL studio

[samriggs]

I use open source on linux so for linux users I would add Krita, a great paint program to use with wacom tablets, also gcolor2 a quick color picker, gimp of course as mentioned, I also use the linux version of the phaser editor, rube for box2d stuff, physcis editor, of course inkscape as mentioned, blender for 3d stuff, wing3d light weight 3d, tiled and a good notepad with plugins ( i use leafpad or mousepad with plugins) geany a lightweight ide with plugins, audacity, meld to compare changes in code.

Thought I would add the list for linux users

[Frances_Roy]

json formatter  

Nice post. Thanks for sharing!

[Nagval333]

Very useful. Thanks for sharing!

[dimumurray]

Krita is also another Photoshop alternative.

Blender is an awesome smorgasbord of tools; 3D modeling, Rigging and animation, Compositing and more.

Github's Atom editor.

Github's Gist for sharing code snippets.

Haxe for cross-platform development.

For project management, documentation and tooling - Google's Cloud platform including Google Drive, GSuite (Google Sheets, Calendar, Slides, Docs, Forms), Google Cloud Storage (Datastore, Cloud SQL), Google Apps Script, and Google's extensive list of REST-based APIs   

[drmop]

Booty5 - Game engine and editor for all HTML5 development

IGX SDK - Cross portal web game services back-end, monetisation etc..

Unity - Mobile development

Node - Running back-ends and local server

Visual Studio Code - Code editing

Visual Studio - Tool development

Serif Draw Plus - Art work

Affinity Designer - Art work

Texture Packer - Packing art work

Audacity - Converting and optimising audio

Filezilla - ftp

Digital Ocean - Server provider

Git - Version control

Discord / Skype / Slack - Comms

Putty - Connecting to back-end

Diff Merge - Code diff

Google - Everything else

[bestwashingmachine]

nice post thanks for sharing. 

[Forged Phoenix]

Some of the younger people would likely prefer browser and free options. I'm sure they aren't generally as powerful, but they can be very helpful to novices and people that can't buy their own tools.

[rui_madeira]

Here's my tools:

 

Unity + VSCode for desktop + mobile + WebGL development

GameMaker for mobile + HTML5 development

Affinity Designer for artwork

Spine for animation

Audacity for audio editing

 

 

 

 

[iDev]

Great list, Saw that you have missed out Brashmonkey's Spriter

It's a must have for 2d animation in my opinion!

[TinkerSmith]

Hi everyone  

By no means I would call myself a game developer, but still I love to tinker. Creating little demos, mini games and the like. For that I use 2 different online engines that give me all I need. 
I can tinker 'on the go' and I got all the tools I need in them to make a complete project. 
I have not seen them anywhere here on the forum, so here they are. 

Flowlab  
- visual programming, love it for quick prototyping and layout checks  
- 2D only
 
microStudio
- scripting this time. Has its own amazing language but also supports Lua,Python and JS (for now).  
- latest additions Pixi.js, Babylon.js, Matter.js & Cannon.js for the more experienced ones

As mentioned, I'm a tinkerer and from the programming side of things a beginner. But there might be others here like me, so I hope this is the right thread to post this. 
 
`Live Long and Tinker`