Fjell Maxim

I build
  • custom websites
  • dynamic web apps
  • polished prototypes
  • reliable solutions
  • slick animations
  • smooth experiences
  • custom websites
with code

TradePath

TradePath

Solution, design & development

Price pattern recognition

Innovative technical analysis tools

Stripe & IEX integrations

Interactive tutorial system

Solution, design & development

Harbinger

Harbinger

Solution & development

Real time news & finance tools

Live market analysis tools

Push & Telegram notifications

Secure user sign up & sign in

Solution & development

William Hill

William Hill

Agile website development

Innovative live data integration

Design implementation

Third party API integrations

Learning & teaching

Agile website development

Xivic Inc

Xivic Inc

Rich interactive websites

Game development

Design implementation

Facebook & Twitter apps

Animations & visual effects

Rich interactive websites

Freelance

Freelance

Flash website development

Design implementation

Order management system

WordPress site development

Learning & consulting

Flash website development

But why?

Your 2D games don't necessarily have to look flat. While environments and objects can use shadows and perspective to trick the brain into perceiving depth, characters are slightly more complicated to pull off - that is, unless you get 3D characters into your 2D project.

Here's how

First off, head over to Mixamo, pick a character (or upload your own), pick an animation & download the result.

Then open Blender, clear the stage and import your newly downloaded animation.

Camera Properties setup
Camera Object Properties
Now depending on what your game or app needs, set a good camera perspective in Blender by selecting it on the stage and using the Transform menu from Object Properties on the right side panel to move & rotate as desired.
Render Properties setup
Render Properties
Next we'll update the rendering engine to Cycles and ensure that Transparent is enabled under the Film menu in Render Properties. This will later enable rendering our frames with a transparent background.
Output Properties setup
Output Properties
Then we'll need to update a few settings in Output Properties. In Dimensions menu, make sure you have the right number of frames - that's visible on the timeline when you select your animated object at the top right. In the Output menu, pick an output folder, a file format like PNG and set the Color option to RGBA to enable exporting the alpha (transparency) channel as well.
Rendering
Render menu
Finally, select Render Animation from the Render menu at the top (or just use the Ctrl + F12 shortcut) and wait for the files to be generated.

The results

Ninja animation
After rendering has finished, you can use the frames to generate an animated clip. Plenty of tools out there - I used ezGIF for this one.

Of course there's a lot more to cover but this article should get you through some of the basics with ease.

One of the cool things you could do is go beyond games and use it in your web projects or apps, combine with a few filters & keyframe animations and make some magic happen.

But why?

I needed a place that wasn't a portfolio site, wasn't a blog, wasn't a mad scientist's lab but had a little bit of each. Here you'll find a nice balance of game & web development resources, ideas and experiments with a personal touch.

The road so far

There have been a few iterations across the years.

2009
Built in 2009
"The Attic" built in 2009
2014
Built in 2014
Portfolio website in 2014
2020
Built in 2020
Built in 2020

Endnote

I hope you enjoy the journey and thanks for coming along!