3D Animation Editor

Posted on by admin React, Typescript

For my latest project I wanted to look at the recent..ish full-stack technologies that I haven’t had the opportunity to use in my full time job. Next.js 13.4+ with its new router app pattern, Tailwind, and Vercel’s new storage API. I needed a project that would engage me and I figured a 3D animation editor would be ideal. I studied animation at university but haven’t been able to stretch that muscle for quite a while. Would it be possible to build a 3D animation tool in the browser that’s comparable to the early animation tools I used just over twenty years ago… Where did the time go!!!

The go to library here was Three.js and the trick would be to use a nested object approach, so when for example a shoulder moves the upper arm the forearm and the hand all move too. It’s a huge time saver when animating. I’d seen the react-flow library and figured that would be a good UI solution for describing the animation hierarchy. A bit of customisation and I had a convenient way to create nodes and enter positional and rotational info. Once an animation was added I could then save that to a postgres database.

Ok there was a lot more to it but essentially that’s the big picture. Here’s a screenshot of the editor.

And here’s a short video of the output.

Choose your own adventure

Posted on by admin Android, Dart, Flutter, Interactive Fiction, React, Typescript

I’ve just completed a new personal project.
A “Choose your own adventure” style game.
I’ve built adventure games before, but this time I wanted more control over the story, guiding the player through a narrative as opposed to a more sandboxed world.
From experience I know that editing these type of games is a lot harder and more time consuming than writing a player, so to improve the workflow I decided to build a fully featured editor. I settled on using NextJS connected to a mongoDB database. Hosted by vercel the editor builds automatically when I push to github.

The story point editor looks like this.

And the story can be tested online in preview mode.

Once I’m happy with the game I need a way to distribute. I chose to build the player using Dart and Flutter. I can embed any game json in the app and publish as a native app to IOS, Android, Windows, MacOS and Linux. Web support is also available via the flutter beta channel and has been helpful for sharing the game and gaining feedback from play testers.

Interactive Fiction : React – Redux

Posted on by admin Interactive Fiction, JavaScript, React, Typescript

Rebuilt the Interactive Fiction Player in React + Redux .

The Shivers

[Update 25/September/2019]
Refactored everything to Functional Components and made Hook based. Have added Jest Testing, and optimised with lighthouse.

[Update 16/March/2019]
Crossed my mind that the game engine might be more interesting if it could add some random elements. Maybe take it in a direction where it could run games similar to those from the series of Fighting Fantasy adventure books . I’m not sure if it will but I have added a dice roll to the game engine and also dealt with 10 months of technical debt so I’ve bumped up to the latest react version, migrated from CSS to styled-components and moved from JavaScript to TypeScript.

I decided to rebuild the Interactive Fiction Player using React and Redux. It still uses the same data structure so the same games can be played in the Angular version.

Previous post about Version 1 which was built with Angular / Typescript https://www.markhorsell.com/2017/03/interactive-fiction-angular-typescript/

JavaScript or EcmaScript

Posted on by admin ActionScript, Dart, JavaScript, Typescript

I’ve just started looking for a new Job and after a few calls from the Agencies, there’s one question which I’m finding hard to answer.

How many years of JavaScript experience do you have?

I think the question should really be.

How long have you been using EcmaScript and which versions?

So whilst I have been using JavaScript for 17 years and I could just say that, in reality it’s changed a lot in that time and then for much of that time it wasn’t something I was using full time.

For years I was using Actionscript 3, you might know that it’s an ES4 language, which counter-intuitively has much more in common with ES6 aka ES2015 aka Harmony, Typescript and Google Dart than it does with ES5!

But how could ES4 have those features if they weren’t in ES5? Well ES4 was ambitious it added Classes and more to JavaScript and it got bogged down politically. In 2007 it was abandoned and the standards committee went for a less radical update, however, Adobe had the freedom to add whatever they liked to their own VM in the Flash Player and they went ahead, it’s only relatively recently that it’s features are appearing in the browsers thanks to ES6 and Babel.

And then just to confuse the agencies, even more, there’s TypeScript, which some refer to as ES2016+ or ES+! But try explaining that to a recruiter and most would just glaze over.

This article explains what happened to ES4.
EcmaScript 4 was too far ahead of its time

Brendan Eich’s feelings about the abandonment of ES4, worth reading the comments if you’re curious about why it happened, but a lot of suspicion around it being a political move by Microsoft to hold the web back.
https://brendaneich.com/2007/11/es4-news-and-opinion/

This shows where ES4 fits in.
https://en.wikipedia.org/wiki/ECMAScript

And if you’ve never seen AS3 then here’s a link so you can see how similar it is to ES6.
https://en.wikipedia.org/wiki/ActionScript#ActionScript_3.0

John Papa’s thoughts on whether Typescript should be referred to as  ES+
https://johnpapa.net/es5-es2015-typescript/

Interactive Fiction – Angular + Typescript

Posted on by admin Angular, Interactive Fiction, Typescript

The Shivers

Over the Christmas holidays of 2016 I played the game Firewatch https://www.firewatchgame.com/ ,it reminded me of the classic Interactive Fiction games of old, a genre I discovered that is still alive and well https://ifcomp.org/comp/2016, it also led me to this documentary which whilst it might be a big long and nerdy for some I also really enjoyed https://www.youtube.com/watch?v=o15itQ_EhRo

This all got me thinking that creating my own Text based Adventure game would be an excellent project for learning Angular 2+ and Typescript, so I started work on “The Shivers”. It’s a short game, but has enough in it to encompass several core Angular / Typescript concepts, manipulating dom, data and incorporating Dependency Injection, Services, Components and Directives. The game is entirely driven from a model so multiple games can be built without needing to touch the code. At the core of this is what I’ve started to call a decision engine, here’s a snippet.

{
"action":"Insert mouthpiece into the horn",
"conditions":{"areCarrying":["HUNTING_HORN","MUSICAL_MOUTH_PIECE"]},
"results":{"message":"You now have a playable hunting horn.","take":["PLAYABLE_HORN"],"destroys":["MUSICAL_MOUTH_PIECE","HUNTING_HORN"]}
}
Actions are the commands available to the user as i didn’t want the annoying verb noun guessing of some adventure games.
There are several condition types, such as are carrying, room contains, location and have talors( Money ).
The results will always have a message and will perform a number of result actions:
message, change score, change location, destroy object, take object, drop object, change room description, add talors, remove talors, create exit and close exit.
These options are enough to build very complex combinations of puzzles to solve and its easy to add more should they crop up.
[Update 25/3/17]
Angular 4 was released a couple of days ago, have just updated the game from 2.3.1, nothing too painful a few dependency updates and some small code changes, but nothing horrible. Angular library looks like its almost halved in size from 800k to 450k, but that includes a lot of packages so cant see it getting much bigger even for a huge application. Game code has increased from 27k to 45k but I guess thats the trade off. Seems to be running faster as well 🙂