scheffgames

Html5 Tools of Trade

14 posts in this topic

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. :D

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.

 

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

Share this post


Link to post
Share on other sites

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 and Zenext like this

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Arian Fornaris likes this

Share this post


Link to post
Share on other sites

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   

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.