Adding a sound effects editor/generator to Gdevelop

I've been a fan of Gdevelop since before even knowing any programming languages. There is something wonderful about the design of the editor and especially the event sheet- which allows non-programmers to quickly create their own game prototypes.

Because of that, you can see now that ever since I acquired some programming experience, I have been contributing to it's editor at github. After doing some work to integrate Piskel - this allowed pixel art creation/authoring straight in the game editor. This is something I've wanted to have in it for a long time, but never imagined I would add to the editor myself.

In this last week I made another commit- that adds a sound effects editor to Gdevelop - straight inside the IDE. 

My goal with this is to make Gdevelop a stronger tool for rapid prototyping and game jam events - put it in the hands of artists in the team. Something as trivial as finding good basic sound effects and putting them inside your game might take 30 minutes or more - with this addition there will be no need to search for it, download,import and so on. You can even tweak the effects.

The library I initially chose was https://github.com/loov/jsfx. https://github.com/4ian/GDevelop/pull/695

After using it for a longer period and some further research and feedback, I decided to replace it with

Jfxr: https://github.com/ttencate/jfxr   https://github.com/4ian/GDevelop/pull/716

This is how it looks like now:

While being at it, I made the external editor embedding code more reusable and solid- something that should help for adding other editors to gdevelop in the future.

The idea for this came from remembering being on a gamejam- where we had 1 artist (me), one musician, one generalist and 2 programmers. My friend- the musician spent time on the music, but had to stop working on it on the second day- in order to look for basic sound effects. He lost some time also setting the software for making music (renoise). I thought- if we knew about this generator back then- it would have given him more time for the game music. A lot of games at that event didn't have good basic sound effects because they ran out of time, but those that did- the sound effects made a big difference on their play 'feeling'.

The event sheet in Gdevelop encourages artists without programming knowledge to try to make games, the pixelart and music editors should invite them to use Gdevelop even more. The IDE will give them a complete and very intuitive dev environment that is both effective and fun to use - like a fantasy console,but without limitations.

All of this of course would never be  possible without the incredible work done by Gdevelop, jsfx, jfxr and piskel's creators. My role in this was only in making them work seamlessly under one IDE- together and deliver a good user experience.

Porting Yarn to Electron and adding some cool features to it

Yarn is a tiny wonderful open source editor for non linear dialogue in games. It is written in html5 and exports the data in json file format- to be used with another library called 'Yarn spinner' in Untity3d games. Alternatively it can be used in html5 games with another dialogue file interpret library called 'bondage.js'. Yarn has had a stale development over the last two years- with a handful updates from it's community. More of the updates seem to have gone to yarn spinner. What attracted me initially to it is a kickstarter game that I backed a couple of years ago- called 'Night in the Woods'. Yarn and Yarn spinner were used to create it. Yarn itself is very sleek and user friendly- really clean interface, but it lacks some usability features that make it a little harder for new users to learn.

After looking at it's source code I decided that I want to try and incorporate it inside gdevelop - in the same way I embedded piskel earlier this year. It would really empower gdevelop 5's newIde for easy creation of story based games - rpg games, adventure games, visual novels- all that jazz. Gdevelop5 in that case would actually have an advantage over unity3d- as yarn itself and the library to parse yarn story files (bondage.js) can be integrated with the gdevelop5 and work out of the box in a very user friendly way.

In order for that to happen however, Yarn needs to be updated to use electron and get some usability improvements. This time I had to actually change the software I am embedding myself! Luckily it's source code was fairly easy to understand and nicely structured enough for me to dig in. It took me only a couple of hours to port it to electron. The main parts that needed porting were really file i/o and the way some libraries are used. The port to electron also fixed some old issues- such as the inability to have two instances of yarn open.

I really wanted the official yarn git to approve my port and make it the main development branch, so I submitted my port to them. The maintainer approved it but is for now keeping it a separate branch

https://github.com/InfiniteAmmoInc/Yarn/tree/electron

and here is my Pull Request:

https://github.com/InfiniteAmmoInc/Yarn/pull/68

I also took the time to add a number of features that were requested before and I thought would really make it much more user friendly!

• Ability to easily create links to other existing nodes via a new helper menu:(addressing #34)

• Ability to test dialogue via e new "Run" menu (using bondage.js and with support to render bbcode)(addressing #29)

• file drag and drop (including support for dropping multiple files)(addressing #32)

• Automatically create New Nodes from [[new]] and [[new|choice]] - if no nodes exist for them (addressing #27)

• Ability to run more than one instance of Yarn (addressing #59 )

• Lots of fixes and new key bindings 

Since my pull request was approved, its electron port has seen fixes from a few other users- this makes me feel confident about the future of Yarn.

For that reason the next stage for me now is to look into integrating it into gdevelop 5. That begins with writing an extension for gdevelop that exposes the functionality on bondage.js to the event sheet. From there on putting yarn itself in gdevelop would be very easy. I already have that sorted for another personal project that is using electron.

In any case, if I succeed in getting these two to work as one and get it merged into gdevelop5, expect to see another post with a demo example game and a tutorial on how to use gdevelop to create non linear dialogue type interactions in your html5 games. :)

Getting two open source projects to work as one - Gdevelop + Piskel = Awesome!!!

In recent months I have been highly interested in javascript for a number of different reasons.
First of all my current day to day job requires a lot of repetitive data entry and data checking activity. I quickly found out that alot of it can easily be automated by writing different web crawler functions.

This is when I first started to reverse engineer websites in order to teach my macros how to extract information from them that it would then use to decide on how to proceed with it's data entry process. Web browsers are awesome in terms of their debuggers- in a way that many game engines arent. They let you dig through a web page, see how all elements are organized in it and how to programmatically instruct your web browser to click on buttons and fetch data. This is the definition of a web crawler.

This newly acquired experience motivated me to start digging more into javascript- as it is the scripting language of the web. Coming from a python background, going through web courses from scratch kind of felt like a boring route. So instead I went ahead and started playing with different game engines - such as Three.js and Phaser- both awesome engines btw.

Finally when I found out that Gdevelop's new IDE is written in javascript-  that made me excited- because for the first time I had an opportunity to change how it works.

To give you some background - before knowing any programming languages at all - I used to be 100% invested in engines like construct2 and clickteam fusion. But those two lacked something very near and dear to me- they weren't open source, thus not really owned by their  community of users. At that time I found Gdevelop- a great event sheet based programming engine that had almost everything I wanted. But its editor frustrated me when compared to  the other two- with a lot of small quirks and one big one - it wouldn't allow the user to author any pixel art. You would have to have pixel art prepared in advance to start prototyping anything. And prototyping is not as fun and personal imo if you are not moving your own stick man :)

This bugged me for years. Gdevelop being awesome, but not having a pixel editor like clickteam fusion and construct2. So fast forward to several years later - I suddenly have the real opportunity to change that! Gdevelop is open source, its editor is in javascript- which I have some experience with. There are multiple html5 based pixel editors that are also open source! Holly crap! Piskel is awesome - and its a perfect match. Can we do this? Can we?

Hell yeah we can! :P
https://github.com/4ian/GD/pull/493

Granted I am not as experienced as @4ian, the main developer of Gdevelop - he did do some refactoring on the code and helped me along the way. So did Piskel's author (the async function especially) - but what I made a pull request with was a fully functional prototype of the two applications working as one:

To do it I had to learn a bit on how both of them work!

So how does this implementation do it and why is javascript so awesome? Basically both Piskel and Gdevelop are html5 based apps. While Gdevelop was already running inside electron, I had to make piskel also run with it. That was simple enough- just create another electron window instance that will load and house piskel. In the process I learned a lot about electron's api - how to initiate, control and send signals between window instances. I had to tell gdevelop to send to piskel a list of paths where the image sequence pictures are.
Gdevelop is sending that signal to my own intermediate index file that contains the instructions of how the two should communicate. Inside it I had to load the image sequences from the paths and turn them into base64 strings. Didn't even know about base64 strings before this :)
Then finally parse that to the embedded electron window. And voala- loads them up!

But we have to keep track of the files- which frames come from gdevelop and which were made in Piskel? For that part I was just amazed at the fact that I could just attach new variables to piskel objects through my intermediate index file. Without touching piskel's source code I attached the imported image paths as a new variable to every frame object. I also hid piskel's  'New file' button and in it's place injected two new custom buttons. The main one - to save back to gdevelop overwrites any frames with original paths and create new paths for frames that were made inside piskel. When complete- it sends a list of paths back to gdevelop to load, where gdevelop reloads the list of sprites.

With all that done, Gdevelop now has pixel editing capabilities - which are actually more advanced than what you would find in construct2 and construct3 for example. Piskel has some very powerful pixel art tools!
Much thanks to both Florian Rival (Gdevelop developer) and  Julian Descottes (Piskel developer) For the patience and support along the way.

After  getting it merged, I also added:
https://github.com/4ian/GD/pull/522  and https://github.com/4ian/GD/pull/543

Piskel is now a part of Gdevelop!

If you want to play with it, please go ahead and grab a copy of the latest release:
https://github.com/4ian/GD/releases

It's free, fun and even if you aren't a programmer you can use it to create your own games and in the process learn a bit about programming  =)

Apart of  the addition of pixel editing, the newIde has an impressive number of new features almost every week and is being rapidly developed at the moment. You feedback and support will be appreciated!

Metasnap - a screenshot+note+palette app written in AHK

This was a little pet project that took a couple of weeks to implement in my free time. I wrote it in the autohotkey scripting language with the goal of pushing its gui capabilities.

I needed some sort a screenshot app that remembers the area I want to take a snap of and lets me leave notes in the metadata of the actual image files. While developing it I realized that I can encode other types of data inside the image files, such as color codes - so the tool mutated into a color palette editor and basic note taker on top of a screenshot app.

Before it was called "Metasnap" - I named it snapgrab. In any case, if you have cool ideas of data that can be encoded into screenshots,please let me know:)

You can download a copy from bellow:

https://blurymind.itch.io/meta-snap

Features:

- Take screenshots of the entire screen or a set area. The tool remembers the area between sccreenshots

- Pick colors and store them inside the screenshots you took. Picked colors are stored as both rgb and html color codes that can be easily copied to clipboard. Ideal for web developers and artists. The color palette is stored as metadata inside the screenshot file

- Leave notes about screenshots you took - inside the screenshot files metadata

- Tiny image selector with support for bookmarks

Godot 2.1 - 1$ gesture recognition plugin

Some time ago I encountered a little charming google doodle game that uses the player's scribbles for input:


You can play it here:
http://www.google.com/doodles/halloween-2016

That mechanic inspired me so much that I decided to try and implement it in Godot. Luckily I didnt have to start from scratch. The basic 1$ algorithm was ported to gdscript, but its bare bones implementation was not ready for gamedev. It was only a function that can be crashed. I added some commits to it. Fixed some game crashing bugs in common corner cases and added a bunch of cool features.

After porting it into a plugin, I added the ability to teach it new gestures and record them in a json file.
Added some extra optional features:
 The developer can set limited ink - to limit the size of shapes that can be drawn Upon recognizing a shape, it also emits a signal of what shape it is and how much ink was left when it was completed If the ink left is > 0, it will create a collision shape from the drawing, that can be used to interact with other parts of the game You can limit how many collision shapes can be drawn optionally.
Optional particle effect and ability to set line thickness and color Ability to set the allowed drawing area and change the mouse cursor to a pencil then it is over it

Here is a demo video:

It can recognize the following shapes out of the box (in the json file):

• carret
• v
• pigtail
• lineH
• lineV
• heart
• circle

If you like the plugin, feel free to get a copy from itch.io (maybe even leave a tip in the jar ;) ):
https://blurymind.itch.io/1-gesture-recognition-addon-for-godot

Github page here:https://github.com/blurymind/1dollar_gesture_recogniser/tree/master/addons/1dollar

If there is enough interest in it, I will port it over to Godot 3..
Might make a little game with it when I get the time :)

AHK scripting

It's been a while since the last post here and a lot has happened. It might take more than a few posts, but I will try to catch up. My current job has taken a way a big chunk of the time that used to be dedicated to creative tasks, however it allowed me to advance my programming skills and do some interesting things.

I noted in a previous post about what it entails- a lot data validation and entry. The company has allowed me to automate the majority of the processes via scripting. For that I chose Autohotkey- as it's the perfect windows api for macros and its open source.The AHK scripting language looks like Basic mixed with javascript and can be a pain in the neck in the start- but it's pretty cool once you get a hang on it.
Using it, I wrote a gui macro app that does my job's process automatically. Under the custom interface, the app holds a giant collection of macro scripts, web crawlers, logging and automatic data correction functions.
I called it "Sunlotion" - the name is a joke- for it fills in for all the flaws of the scheduling software that the company has been using- we shall call that "Soul Destroyer" in this article.

When I get a job request in an email or a spreadsheet, all I need to do is highlight the text and pop up Sunlotion's custom menu - it gives me the option to parse the text. Via a combination of regular expressions and functions, Sunlotion populates it's own interface's fields with the correct information from the text I fed to it. Who requested the job, who it's for, duration, date, project code, etc, etc

The date gets checked- is it on a weekend, is the date too soon (short notice jobs) , is it this year (believe it or not people make that mistake too) and so on. It gets converted to the correct format automatically- "fri 12 jan"  becomes 12/01/2018 - so as not to trip Soul Destroyer.
The duration also gets converted to the right format automatically- "2 days" becomes "15" hours. 1.5 hours becomes 1.30 hours. Project codes get automagicaly validated via a web crawler macro - when it receives it, Sunlotion  navigates to a website in the background, checks the status of the project code and if valid- proceeds. If not- it creates a reply email about the status of the code and sends it to the requester.
Another crawler macro checks what area the job is for (so it knows whom to email later) by navigating to another website and extracting the data.It detects if its fed a site code or a site name. If its a site name, the web crawler macro will retrieve the site code.

And after all the raw data is automatically organized, cleaned up, analyzed and validated by Sunlotion, I click on a button and it fires a macro that raises the job on Soul Destroyer, writes the email, attaches the right files, the right send to emails, logs the job to a spreadsheet and moves on to the next job. Rinse and repeat.
For some types of job forms I was able to completely automate the process , so my tool would raise a sequence of hundreds of jobs on Soul Destroyer without need of any supervision.

These are just scratching the surface though- there are so many macros, crawlers and functions, that it would take too long to list all.

Of course my managers noticed that this was freeing my time and gave me other tasks to keep busy. I started raising jobs that another department had to raise in the past. I wrote little apps for my department and other departments to save the company time by automating other processes(over 10 apps so far). The company in return gave me a yearly bonus and an innovation award.

There is no raise in sight, I am not technically getting a programmer's wage either, but the experience has helped me tremendously in becoming better at writing my own apps.
Since I can't show or share Sunlotion here because it was written in company time- I made another AHK app in my personal time for fun. It's called Metasnap.
You can check it out here:
 https://blurymind.itch.io/meta-snap

I might write a post about in later on.

I have also been working on another app- that I am writing in Gdscript via Godot. Stay tuned- it will be more interesting to present :)

Job applications - happy villager

I had a call from an agency a couple of months ago. They forwarded my portfolio to a studio in London. The studio was looking for an animator/rigger with experience in Unity3d and mobile games. My previous experience was close to what they were looking for and that got me to the interview stage. They interviewed me via Skype and explained that the final stage would be a test for which I have 4 hours to complete and send.

The test was on the following week. When I got the project file the clock started ticking. I didn't know what to expect prior to getting it. What I got was just body parts in black and white , and a reference image (on the right). The goal was to rig the character and animate a happy emotion that is up to 4 seconds long.

Rigging the character took about an hour. I arranged some elements into their own subfolders. The hierarchy of elements was key to getting the animation polished quicker. For example I put all face controls under a facedir node - that would allow me to turn her head with less keyframes to manage.
The minimalist character design was a good thing in this case - even with the imposed limitations -such as for example the lack of joints in the legs. I worked with what I had.

All and all they never did give me a call. Instead the agency told me that I have passed their test and they really liked my work. However the CEO has decided to hire somebody that they already know from previous projects instead.

Normally I wouldn't share work done for others, but given how I did not get paid in this case, how they didn't give me personal feedback and also that there was no NDA signed, I feel absolutely free to share this here :)

The animation has a drop in frames, because it is captured from Unity with capture software. When running, it is as smooth as butter 60fps. Thus why all I could get out of the whole experience is now the gif file you see above and the unity project.

If you are looking for an animator with rigging experience - who can do the rigging and the entire animation in Unity alone - I can send you this test file to review it yourself.

Using macros and a clipboard manager to automate data entry tasks

I recently starter work at Arqiva. My job involves a lot of manual data entry.
The software they have for that at the moment is really bad at repetitive tasks - which are common in this job.

It forces the user to click through drop down menus, input boxes and pop up dialogs in order to enter the data of a single job that needs raising.  You can't alter the data of multiple jobs at once. The entry boxes have missing mouse scrolling, basic text formatting and even a right click menu. It makes the software look as if it was made in the middle of the 90ies.

Example of such a task is raising a request for an engineer on the system - where I need to file over a 100 job requests for different sites that have the same description and other types of data such as date (hello pop up calendar), type (drop down list menu), codes (hello input boxes),all sepparated by a wonderfully annoying requirement to click on a 'next' button. It's very old school, lacks any design common sense. I am not sure if the guy who made it actually tried using it xD. Anyways...

All the people before me laboriously filled the same boxes a 100 times with the same information - for different job sites. Each job took over 30 repetitive steps by the data entry clerk. So 30 steps multiplied by 100 sites = 3000 steps to raise the 100 jobs.

After doing this for a day - even with some copy and pasting from a notepad, I found it to be error prone, laborious, boring and slow. After repeating the process 50 times, one can forget to paste something or click something wrong.

I had to do something as this started to drive me nuts. I came up with a simple macros + clipboard manager solution.

Since tech support wouldn't let me install any software without waiting for months, I decided to use an open source portable version of whatever I could find. I didn't have much time to look into all the options out there - but what I found did fit the bill!

tiny Task - for recording and playing a macro:
http://www.vtaskstudio.com/support.php
It automatically selects menus, clicks on buttons and enters text for me.

When you combine it with a clipboard manager - it becomes a very powerful automation tool!
One such nice manager is Clipx:
http://bluemars.org/clipx/

ClipX stores multiple slots of information that can be recalled to be pasted when required - via an appointed keyboard shortcut and selection.

They are both tiny, need not be installed or administrator privileges, and are free/open source.

Thanks to these two, I have successfully created myself a nice little data entry AI that does 85% of all the work for me. It has 95% success rate when set right.

Its not like I just browse facebook as it is doing all the work - I still overlook the operation for any errors - those 5% are important! I also do need to fill in the manual parts of the forms that do not repeat - if such are present.

The end result is an over 30 step process being reduced to two clicks.
So a 100 jobs would take 200 steps, rather than 3000!
Huge improvement if you ask me. And instead of going crazy clicking, now I get to calmly drink my cup of tea while the whole thing is done by the AI.

Texturing PBR materials in 3D Coat and exporting to Unreal 4

3D coat generated an ambient occlusion and a curvature map for each object I painted in it - that way it knew how to paint in crevices that are stored in the imported normal map.
It was excellent in this regard as I found out that it can handle memory quite well when compared to Substance Painter. In 3d Coat I was able to get over 40+ layers on 2x2048 maps of 3 paint objects - with all channels + normal map. In substance painter - it just crashed on the second or third layer I made (preview texture set to a miserable 512).Even though my laptop is 7 years old - 3d coat handled this one quite gracefully.

For the skin I used one of the leather pbr shaders that came with 3dc and heavily altered it to make it look more like human skin.
Of course it is really difficult to fake SSS in real time. Unreal engine - which is the target engine for this character does have a SSS shader, but since the character will not get any closeups and not much of the skin is really revealed- I decided to be cheap again and stick with one material for the entire character. Before texturing the body I made an import test of the head/spray mask texture.

I set the texture maps in unreal in a way where the alpha channel of the diffuse is used to store the roughness map pass. I also wanted to use tha alpha channel of the normal map to store the metalic pass, but I found out that Unreal 4.10 does not allow using the alpha channel of a normal map texture if the file is a png. A few forums noted that it will work if I use targa instead - but targa is a huge file size and I thought i wont be saving a lot that way.

Gangsta-mask by blurymind on Sketchfab

I imported my character with the unreal rig applied to it.
Here is the model - you should be able to preview it in your browser:

Hero TPP by blurymind on Sketchfab

For the spray cans in the game I used an rgb map to split it into three areas - cap, sticker and can . The alpha channel of the sticker controls the sticker's mask in this case. That way the programmer on the project - Steve Stavrev can control the color of each instance of the spray and even change it dynamically during run time to create some interesting effect. 

His pose and animation is not my work - it is using one of the unreal project examples. Since my binding pose and the source binding pose are slightly different, the actual animation is a bit screwed up on the target. Unreal 4 supposedly has nice tools to adjust binding poses and when this issue is at hand, but I discovered that as I am writing this (4.10.4) there has been a bug for over an entire year that nobody from epic fixed that stops the users from doing that. I had to blindly set up the bones in blender, but the fingers are still screwed.
The best thing to do here for my portfolio is to actually make the animations myself, but unfortunately the freelance nature of the project dictates that we make do with this.