Objective:

The objective is: to find tools and methodologies for our Digital Creativity students, to easily explore "game creation" tools and concepts,so they can:

• Play with creating games without getting too caught up with the seriously hard work of design decisions, or taking three years out to learn game engines like Unity, Unreal or complex 3D modeling with Blender.
• Learn key skills like image editing (Photopea, Inkscape, audio editing (Audacity) and video editing and/or coding etc
• Be encouraged to think very creatively with the tools and time available.
• Create something impressive that they can be proud of, share with friends, fun and interesting that demonstrates their creative thinking

A quick guide to the library game made with GDevelop

Note: As a massive caveat, I have to say, I'm not a gamer so don't really "get" some of the core concepts, and personally I'm looking for tools that let the students create something that might not be a game in the traditional sense, perhaps leaning more towards an experience that helps to communicate research, or an art piece or whatever, but using the tools that surround game development (which are a lot more powerful than Powerpoint, affording more creative opportunities). This document is/was just an exercise in note-taking as I learn.

I'm a big fan of tools that have a low barrier to entry, but can also grow with you as you learn. For example, with Twine or Hypercard you can quickly create a simple textual adventure game, but as your abilities grow you could ultimately do incredibly complex and marvellous things with them. You get "trapped in" by the an overly limited set of features.

Potential Toolkits

• Using GDevelop as a game engine (or general purpose media tool) has huge potential because the visual coding is approachable (and logical) and you can create something very polished quite quickly. It's fun tool rather than 3 months learning, and exports to web.
• A-Frame is an option. One can, with relative ease create a 3D scene, add animation, models and media, assembling them into a VR world and/or narrative.
• P5js and/or Processing are good options, but purely "coding-based". To make anything ambitious you need time to master Java or Javascript.
• TinkerCad for creating 3D models is very approachable
• BespokeSynth , visual audio production for audio generation, soundtrack creation.
• Blender may be called upon (but hopefully not too much).

See Also: Pictarize, Echoes, PygameZero - tools which are easy to use and have a lot of potential - if you have a compelling idea.

Tools ruled out (probably)

• Blender, Unreal, Unity all are hugely complex tools that would take a year (or so) to learn.
• Twine. We have used Twine a lot in previous sessions and tbh we want a change, but also want to lean away from textual works.
• There are many interesting game development environments but tend to require learning a complex coding language (i.e Godot etc)
• GameSalad etc- tools that cost money are out of our scope. We use these tools "on and off" and with various students, which means most licencing models don't fit our needs. Same goes for most of the Adobe products.
• Alice 3D - a very interesting 3D VR creation tool - that has a lovely visual VR programming tool, but lacks pzazz somehow, and lacks a vibrant community.
• A-Frame-p5js - is interesing as we have p5js experience - so it's more familiar than "raw" A-Frame.
• I tried a lot of the Autodesk tools. What a complete nightmare they are. Won't be touching those again (Macs don't have a "middle" button!) . The "mud" one was quite good though.

The State of An-imation - Using making Games, AR and VR, AI, media, coding for teaching and learning etc.

Unity and Unreal (and even Blender) are just too much (not just in GB) to learn. I also suspect they are a red herring, encouraging people to focus on the "realism" or aesthetic, rather than the underlying concept, leading to predicatable creative outcomes and hard to produce tropes.

Ideally, I have been looking for cross-platform, or web-based tools. There are lots of PC only tools - RealIlusion etc.

I seemed to discover lots of dead tools? Like DragonBones - This looks great, but dig deeper and there's nothing there, it's like there's been an apocalyptic event in the animation world within the last 5 years. Did they all go bust, get bought or what? Jahshaka simply crashes.

Update: Just discovered * https://quaternius.com/ some great free assets here.

Finding Free Animated Sprites

Rather than creating characters and sprites I looked into seeing what resources were freely available. At the core of lots of games is a character and whilst there are free sites that share animated character graphics, they all lean in to the whole fantasy orks and elves, zombies, big-boobed armoured warriors or militaristic characters. As Alan Moore said, something along of the lines of ...

" There should be as many fantasy worlds as there are people, but they're very conformist and overlapping "

And whilst there are some sites out there that have lots of assets, if I'm honest, I found them cliched and trope-ridden.

• Open Game Art https://opengameart.org/
• https://quaternius.com/
• Kenney https://kenney.nl/assets/category:2D
• https://itch.io/game-assets/free
• https://assetovi.com/3d-models/search?categoryIds=4
• https://www.gameart2d.com/
• https://www.gamedevmarket.net/
• https://craftpix.net/freebies/
• https://pixela.ai/

Tried AI to generate spritesheets and they were pretty useless. Your mileage may vary.

Creating your own animated sprites without animating

Hand-drawn animation is hard, it takes lots of time to do each frame - and even when you don't you don't get the "flow" of what you wanted.

I tried varius animation tools such as: * Pencil2D - classic 2D onion-skinning app, and boy it's more work than you think. * Cavalry <-- very complex, lots of difficult concepts to deal with * SynfigStudio - similar.

The hard creative work balloons when you think about doing an isometric game.... running N, NE, E, SE, S etc...

Cunning Plan 1 - Using Animated Drawings

Animated Drawings would be an ideal solution, it takes a simple drawing and adds motion to it, essentially using AI (I think) to rig your drawing. The plan was to :

• Do a drawing and generate walk, run, idle, jump animations RATHER than learn a whole 3D package, with the aim of making more Monty Python-esque games.

I liked the 2D aesthetic and the fact that because the motion was so good, that even a bad drawing, once animated, somehow looked very cool.

After installing the software, I used V's drawing of Eda from Owl House to make this:

Unfortunately I discovered that the open source github site made available is different from the online tool one can use and the motion files are propriatary from Mixamo. The online tool breaks a lot and isn't configurable.

Cunning Plan #2 - Find 3D characters to generate 2D sprites

OK. My next plan was to find 3D models and use those to generate 2D sprites. In this case I would use Blender, but would essentially only be dipping in. The process might go like this:

• Find a 3 character you like
• Upload it to Mixamo to "add movements" such as walking, running, jumping etc (Kinetix Studio - which takes camera action and animates a model, was also explored - in free version, but the trial runs out )
• Use Blender to "record your animation" to individual images
• Import those images into GDevelop to use as 2D sprites

Free 3D Assets

• Asset Ovi
• Clara
• SketchFab See Central Hall
• TurboSquid

When looking for 3D assets I quickly found out: * I don't like a lot of them - again, there are lots of dwarves with axes etc * The good ones are paid and expensive * Like looking for graphics or fonts, it can become an exhaustive, almost additive task, where you find yourself just looking, and scrolling and hoping you'll find what you want. A huge waste of time that could be spent being creative.

Cunning Plan #3 - Use simple 3D tools to create characters, then generate 2D sprites

OK. So I can't generate 2D images, I can't easily find 3D models, what about we find a way to make 3D models. Surely there will be a tool that is learnable (quickly) that will suffice our needs?

MagicaVoxel

MagicaVoxel is a Minecrafty tool for creating boxy models. You sort of sculpt a heap of boxes. Quite nice.

• Make 2D SPRITES with 3D MODELS! 6 mins at 5,000 mph!

is like a

From Tinkercad to Blender

TinkerCad is a very approachable 3D tool.

• With Tinkercad, I made a VERY simple model and this is what Mixamo can do to it. I had to use Blender to run the animation and capture the 2D images.

Here is shown in a GDevelop project, what I like about this is that the motion brings SO MUCH life to the simple character. What I don't like is that, whilst in Blender, unable to figure out lighting and rendering, the colours were bleached out (and very flat) because I don't yet understand how Blender's shaders work.

At this point, not knowing Blender I spent a good few hours attempting tutorials on how to make models look cartoon like (rather than 3D model-like)... and got there eventually.

• Toon Shading in Blender, 6 minutes
• Toon Shading, cool as no outline https://www.youtube.com/watch?v=zfOxZjKM56c
• How To Use A 3D Character To Make 2D Sprite Sheets In Blender
• THE EASY WAY to Turn your 2D Sprite into a 3D Model Uses MagicaVoxel, a minecraft like block pixel editor.

Other Blender Directions

Find an animated character and "record" it from different angles. Sculpt a simple character - jellybean - rig it, and then record it from different angles.

• Blender complete rigging demonstration in 5 minutes
• Blender character modeling 15 minutes
• Blender character modeling for beginners - 45 minutes

With mixamo you can upload a 3D model and it auto rigs and animates it. You can then download an animated FBX file. BUT the massive gotcha here was that (I think) the way Mixamo organises the model, with armature, and meshes (not sure if I'm using the right terms) meant that I was attempting to apply the Toon shaders to the wrong part of the model.

** THE CONCLUSION HERE ** might be that, whilst "popping into" Blender to generate some images might be a doable task, seriously using Blender (at such short notice) is probably too much of a stretch. I spent hours even just trying to line up cameras etc - doing the basics is quite hard.

My attempts to "sculpt" a character went hilariously badyly.

Other tool possibilites

MadeHuman

MadeHuman is an interesting tool that lets you create human characters with enormous amounts of tweakability from eyebrow thickness to toe length. I made a self portrait. Still, it's no good if you want to make a duck (which is a shame, because I do).

The Infinite Art Gallery

I made an infinite art gallery using this AI tool (I had to generate quite a few then stitch them together with Adobe Premiere) to generate the zooming gallery.

Another Infinite Zoom maker - errors if you make a zoom out for some reason.

A different Google Colab infinite zoom maker

Note you can move the left and right with the arrow keys - but I'd need to generate different sprites to make that look ok... but there's potential here...

Google Colab

This Google Colab notebook was quite interesting, in that if you upload a photo to it, it will give you a 3D model back. This was promising. I uploaded a picture of Donald Trump, and it gave me an .obj model (which I tried through Mixamo) and it weirdly looks something like a Biden zombie too.

Mixamo and TinkerCad

This is TinkerCard Log Boi. I made the wing in Inkscape, and extruded it. I "designed" it to sort of be "human shaped" because Mixamo made a bit of mess of wing shaped wings (Mixamo is made for people).

This is TinkerCad Long Boi, shown in Mixamo. I'm still REALLY impressed in how much "life" the motion gives what is ultimately a very crude model. Or to put it another way, there's real life and character in the movement, that the model itself doesn't have.

A-Frame

When I export my Mixamo Long Boi animated project as glb an import it into an A-Frame project on Glitch, then the shading information doesn't come with it for some reason. I find because Glitch uses its "assets" model, rather than a file system, that .mtl files never quite work (is this me?).

I got some fbx files to work with texture skins ok (see This maze below). I think A-Frame would work well as a first person "runner" game... with the character "in the camera".

Long Boi-zilla meets Central Hall is the sort of thing you can make just by assembling found objects very quickly, perhaps adding sounds that get louder as you approach.

Rigging your own 2D animation

I did think about ditching any 3D work at all (which always seems insanely involved) and learning how to rig 2D animation from start to finish, so essentially making a digital Captain Pugwash where you draw the body, arms, legs etc... and then add a skeleton to those using:

• Synfig Studio
• Cavalry

And although it looks doable, I think it may be more work than we could manage in a week.

ENVIRONMENTS

So far, I've only looked at the characters of a game, or digital experience. The scene in which this all takes place is of equal importance. And there are number of options.

Using maps of campus

• Received illustrator files from Estates of the Tree Trail. Hid the elements I didn't want, removed some of the styling and rotated so that many roads kinda lines up with 90°.
• Exported a x6 size .png file
• Chopped it into 64 1280 × 1280 images with Krita.

I first tried making an isometric version of the map, added a few trees and discovered a world of hell which is then working out if/how you are in front of a tree see here - if you walk around a bit (west and north to the library car park) you will find a tree and what happens. * I discovered that the whole isometric part of GDevelop is very new, and tbh is a bit of nightmare.

I changed tack and started looking at ** top-down games because they are much simpler. It seemed to me that whilst GDevelop lets you drop hidden objects onto a picture to bump into, that this again was quite arduous if you wanted to create a large map and so there must be a better way.

Dungeon Scrawl

Dungeon Scrawl is a map maker with some interesting features. Perhaps it could be used to isometicize a map of campus like this and used for a game.

A-Frame Environment Generated from a Matrix

This maze was "generated" from a matrix (list of lists) of numbers. I made a small maze-making tool in p5js to generate a list of numbers that A-Frame loads to create the walls.

Interestingly, the dancer in the centre of the maze was created using Kinetix Studio - which turns a video into a rigged model. ** I LOVE ** this concept. Lots of fun to do (e.g do a silly dance, stick your motion on a model, and boom! - but the product is paid for). I couldn't add my own model (and have that dance) but the mexican wrestler definitely suits me.

THEN I discovered that the libraries I was using to do the wall collision detection are kind of old and deprecated, and that now one would need to create a "mesh" in a 3D tool like Blender, which on the plus side would let you walk on a path that even went up and down, but again, was taking me well outside my comfort zone and skill level once again.

A-Frame at times appears to be VR for the rest of us, but all too often requires you to dive into 3D modelling knowledge at phd level. I wish it'd focus on the easy stuff a bit more.

Tilesets

Whilst working with GDevelop to create scenes, and draw invisible objects for the platforms (for you to bump into etc), like with the maze, I thought "there must be a better way than this", and discovered the notion of tilesets . Tilesets are a grid of images that become like paint colours that you can use to draw grass or paint roadway or whatever.

I noticed that GDevelop supports importing Tileset files from Tiled app, and LDtk app - which means there's a sort of standard for this sort of thing, and it mentioned collision maps - which interested me. The idea that I can paint a path, and then have a character stick to it appeals to me - much more than a. drawing a complex map and then b. adding lots of invisible boxes over the map image I've just made.

Free tileset resources

There are lots of tileset resources out there (see the sprite links above too)

• https://kenney.nl/assets/category:2D
• https://craftpix.net/freebies/

Again, I wasn't so fond of the themes used in a lot of them. And boy these sorts of sites have lots of evil Shutterstock bait-n-switch attempts to fool you into buying something.

Tiled Map Editor App

I had a go with Tiled, and discovered a lot of the tilesets don't do what they say on the tin which meant that so far, I've had lots of failed attempts to create a map from a tileset (many in the README list the wrong dimensions/aspects etc).

• Tiled Map Editor Tutorial Part One: The Basics

So far I've had trouble importing a map made in Tiled into GDevelop. I will persist, I watched another tutorial last night and think I'm getting close.

360 Panoramas + 3D scans

One option I've also explored is collecting 3D scans of objects and dropping them into 360 images with A-Frame to quickly make scenes. The advantage of this approach is that they're photographic, the VR created is fun/impressive and they're very easy to make, however, tbh honest I've not had much success with them. I also tried FrameVR - a more end-user focussed tool (rather than a development tool like A-Frame) and found that to be more fun, quicker etc.

Use the Generated 360 Panorama - I made this Birch Forest Sky box with CopernicAI and although not bad the image results weren't great, nor could I get them to sit right in A-Frame... you'll see what I mean.

Here's an A-Frame project made of 360 photos and again, not a totally convincing success. I had to sort of make a "floor" out of leaves and a "sky" ceiling to mask the rubbish-ness of the 360 photo (I have an old crap phone it would seem - and so may the students).

PolyCam (a great mobile LIDAR app) no longer free (or my trial ran out but WAY too expensive).

3D Scanning is also a nightmare

This graveyard made with PolyCam and A-Frame I thought was a direction worth exploring, but soon discovered my trial had ended to had to explore other options.

Other LIDAR tools trialled

I tried lots of these, and again we're into bait-n-switch land, where they appear to be free until you want to save anything. I tried all these mobile tools ...

• Matterport... Did a great job - can't get your 360 out.
• WIDAR did give me a quite nice grave model
• KIRI Engine

The CreativityLab does have 3D scanners, but being able to quickly bang something together with a device that a student probably has is a big bonus, it means we can get more done, and quickly create prototypes etc.

GPS-based possibiliies

Although not free (the freemium version is good enough), Echoes app is a nice tool that lets you create audio walks for mobile devices, that as you walk around play the audio files you've added.

Augmented Reality possibilities

Pictarize is a great, free tool to create image trigger based AR experiences.

Last Gasp - BlockBench!

Last night I re-discovered BlockBench, a 3D modelling tool and after watching a tutorial found I could actually make something.

This is the tutorial I watched

What I REALLY like about BlockBench is that (after watching the tutorial) * I found the simple modelling tools very intutive but way more powerful than TinkerCad. Yoi can grab planes or edges and bend objects into shape. * I could "paint" on a texture - pixel art style * its "low poly" aesthetic ala Minecraft is one that I can work with, and quite like to be honest.

Here it is in A-Frame I exported it as .gltf and everything just worked (that never happens).

The only "issue" I've had so far is that when I upload a BlockBench model to Mixamo it errors. Argh! I really want this to work. I've asked a question on their Discord, let's see how I get on. Update cubhouse helped me get Mixamoo to work, I just hope I can reliably replicate the success.

Last Gasp - FBX files to Sprite Images

I spent DAYS trying to learn enough Blender how to import FBX files and render them into animation frames, and whilst I got some good results:

• Blender is very daunting to use and the interface is at times awful
• People who create Blender tutorials tend to be people showing how fast they can fix a 20 sided rubik's cube.
• I'm really not sure if I could teach someone how to "drop into" Blender.

I really would prefer to avoid Blender all together. Despite its obvious strengths (I would like to learn parts of Blender at a later date) I'm tryng to avoid the whole go and take three years off to learn how to make things side of this.

Pixelartor

Whilst I could find lots of small hobbyist apps (and this is one too) that can render a FBX animation to images - this was the only one I could find that worked for Mac. Pixelartor is an Electron app (which means it's a node.js website app wrapped up to magically become a desktop app).

The thing is, if I download the source code and run the source code using yarn command line tool (which needs installing with Homebrew - see below) it works fine, but if I compile the app into a proper desktop app, you can export your images as a gif file but not as individual files. Boo! I've contacted the devloper but no news yet (it hasn't been updated in 4 years so I'm not holding my breath). It's a brilliant little app though because it lets you set the extra lighting, positioning, frame rate and even add a border to your model etc.

So this app really is worth the bother, even if it does only give you a gif - we can get images out of a gif (see below).

Longboi throwing created as a gif with Pixelartor.

EZGif

EZGif is a good tool, because:

• a. It works!
• b. Position your FBX model to where you want it
• c. In the process crop the area you want to capture
• d. Get a collection of numbered images

FFMPEG

Ffmpeg is a command-line tool well worth learning because it is so powerful. It can convert almost any format into almost any other format of media, and often do magical things along the way, like resizing video, or compressing sounds or whatever. On a mac I use Homebrew to install it.

This command, for example,

ffmpeg -i YOURGIFNAME.gif imageout%04d.png

...will take your gif and produce all the named and numbered pictures you need to import into GDevelop.

The Results

So... I've been around the houses... I've attempted to "fix" Pixelartor source code (and failed) and even tried creating my own FBX Sprite Grabber (and not quite got there yet. The top panel loads a FBX file using Three.js, you can drag and zoom it, and the bottom panel is a p5js project - the idea being that from there saving the images would be easy, but it turns to maybe be a bit difficult to work out... I was gonna add a DAT gui type thing but can't figure out "when" to capture a frame... maybe one day).

See the animations here

** But the process for getting 2D sprites from 3D models is this**

Create/find a model:

• It has to be humanoid and ideally in the T-pose i.e arm out to the side.
• FBX files are best, but you can upload an .obj file with it's .mtl file and image if you zip them into one file and upload that (more involved)

• If you can only find .obj files it is easy to import them into Blender and export them as FBX files.

• BlockBench (Block does have animation that I've not yet explored that may cut out the need for Mixamo)

• TinkerCad
• MadeHuman - makes realistic people
• Monster Mash is a possibility.
• PiFuHD is more experimental - but worked...this weird option might allow for 4 legged creatures
• Find one on 3D resources sites like SketchFab or Clara
• Scan yourself in the Creativity Lab
• Use a free trial at Kinetix and dance!

Generate the animation/FBX file with Mixamo

• This requires an Adobe acc - you can use Google.
• Hopefully if your model makes it through the auto-rigging, you can download as many animated FBX file as you need and download them. Name them wisely.

Using the FBX-to-gif tools above

Turn them into in collections of sprites that you can then add to GDevelop.

There you have it, ta da! As easy as 1, 2, 3.145, 7/9 3,454 $%£@!*!

--

After all that...

After all this effort, using 3D to make 2D easier, I wonder if/would it be easier just to accept much lower production values and providing your story and audio were fantastic, then run with those. Billy's Balloon is an animation that still scars me today. The adverts Don Hertzfeldt did, to me, are some of the most brilliant works of art ever.

Not quite traditional animation

A good story beats something looking realistic this is the GDevelop animation made with Scroobly in 5 minutes I could imagine this with a vocal soundtrack being quite good... and note it does the whole body so walking and dancing are a possibility.

Scroobly This animation was made in 10 seconds in Scroobly and I think that a good story/audio track might make the shonkiness of this a good possibility...

Maybe we could make our own body tracker like Dan Shiffman does here or Denisa Marcisovska. See her live version or the source code

Example editable p5js code here: p5js poseNet

This was my first attempt at a longboi animation where I used Pencil2D to trace video frames of an Indian Runner duck. It has a higgledy-piggldey quality I quite like, but wasn't really what I was going for. I felt it was a lot of work just to get 10 frames. Animation is hard.

• Pencil2D is a lovely cross platform simple onion-skinning animation tool.
• FlipAnim is a great online, free, simple animation tool, but you have to fill the entire image with a colour to get rid of the squared paper background. Boo!
• FlipAClip Android/iOS is a nice mobile app.
• AI Spritesheet Generator produced some images, but they were terrible, but maybe this is something that could be used, its terribleness?
• Synfig Studio is a professional animation tool, with which you can "rig" your drawings.
• Animated Drawings - this site has some animations that might be applied to your story and downloaded and integrated into GDevelop.
• Finding sprites (on sites like Freepik or those listed above) tends to be huge time sink... as you end up scrolling and finding things that almost meet what you want, changing your mind about what you want based on what you find and having new ideas, and then almost not quite finding what you want again.

USEFUL TOOLS

For quickly viewing 3D models etc

• FBX Review - desktop app
• FBX viewer - online app
• Babylonjs for .obj, .glb or .gltf files
• gltf viewer
• C3D

Not only but alsos...

There are lots of tools appearing, but they're pretty much all paid for and each requires a good look at the features to see if they're usable or not.

This dowloadable installable A.I (python based) has prompt-to-model possibilites... not quite got working yet. https://github.com/openai/shap-e/blob/main/shap_e/examples/sample_text_to_3d.ipynb

NERFs look interesting https://docs.nerf.studio/en/latest/index.html

This 3D extension for GDevelop is easy to use - bit weird https://pandako.itch.io/with-threejs-extension-for-gdevelop

Central Hall Model https://3dwarehouse.sketchup.com/model/4c62492d844f050ba5be7877e12bfbe/Central-Hall?hl=en&login=true

Blackjack Interesting visual 3d modeling tool https://github.com/setzer22/blackjack