Scoundrel Studio | Little Indie studio from MontréalScoundrel Studio

Let’s make a Great GIF – Part 2

Posted on May 20, 2016 by ScoundrelCidAdmin

Hey guys,

Hear, hear, all musicians and sound designers, People of Aionos is looking for you! Before I go into detail about the second part of the GIF making tutorials, I just want to let you know that I’ll be posting next week a job description for a paid contract I’m looking to assign. Details have been more than vague so far, but with game development progressing nicely, it’s time to get some music to go with those beautiful graphics and awesome gameplay. Stay tuned !

In my previous tutorial, I presented 2 different techniques to make a pixel perfect GIF of any single character’s animation. But what if you want a GIF of your game in action? Again, I’ll give you 2 different options : the first one, simple but with some small flaws and the second one that works perfectly but requires a little bit more work.

GIF-Animated scenes

Good Results : GifCam

The simplest solution is to use GifCam, a free screen capture software with frame editing abilities. Instead of capturing individual frames, we will be recording a viewport of the screen as we play our game.

Start your game.
Place GifCam on the part of the screen you want recorded.
Make sure that the FPS settings is 33 FPS (You can try to manually add other FPS values, but I have found that the results are always disappointing.)
Click Rec and record your game in action.
Now one of the flaws of GifCam is the lack of hotkeys to Start and End the recording. This means that you might have to remove some frames at the beginning and the end of your recording. (Ex : If your camera follows the pointer)
- First Frame : Click on Edit, go to the First Frame, right click and choose ‘Delete From This Frame To Start’.
- Last Frame : Stay in the Edit Screem, go to the Last Frame, right click and choose ‘Delete From This Frame To End’.
Just click save and you’re done!

Now, I feel this option can give out good, but not great results because I found that image quality is not always as great as it could be. You can see light layering in the GIF below and the cursor speed isn’t 100% of what it should be.

Slight light layering and inaccurate animation speed.

Remember that these GIFs are to be used to share your game in action, they should be the best possible quality.

Great Results : Fraps + VirtualDub + Gimp

For this solution, I had to get help online from the good people at Reddit, especially this post where they give multiple solutions to your GIF making activities. I will share with you the solution that worked best for me and add my own 2 cents on top of it.

First, you have to screen-capture and for that, we use Fraps. Fraps is a simple realtime Video Capture Software that will record both video and audio at the touch of a key. The full version is 37$, but there’s a free version of FRAPS that comes with a watermark, which won’t show in the GIF, and a 30 seconds recording limit, which is more than enough for most GIFs.

So to record your GIF with FRAPS :

Open Fraps.
Focus your game.
If you are using Pixel Art, like I am, be sure to check ‘Force lossless RGB capture’.
Press F9 to start the recording.
Press F9 again to stop it.

Next, we want to crop and trim our video and that is where VirtualDub comes in. VirtualDub is a free and open-source video processing software for Windows.

Open VirtualDub.
Import your newly recorded video.
Crop your video
Trim your video
Here in the Reddit post, they will tell you to export as an animated GIF directly from VirtualDub and most of the time it would be great. For People of Aionos, I found that this technique had a problem when it came to the lighting. You can see in the image below that the light has some sort of layered effect that is unwanted and not representative of the real visuals of People of Aionos.
Clear Light layering.
Instead, do not export as a GIF from VirtualDub, but export as an Image Sequence. This will make sure that all of your frames are at the best possible resolution.
And we are done with VirtualDub!

The last steps are done with a photo editor. Photoshop works great here, but it isn’t free. Luckily, you can easily do the same thing with GIMP, which is a free and open-source image editing software.

Open GIMP.
Open the first image in your sequence of images.
Click File, choose Open As Layers and select the rest of your images.
Go to Image -> Mode -> Indexed…
Set the Dithering to Positioned, check ‘Enable dithering of transparency‘ and click Convert.
Go to Filters -> Animations -> Optimize (For Gif), which will reduce the size of the file and open a new window.
Go to File -> Export As and name your GIF.
Un-check the GIF comment option and check ‘As animation‘.
Set the delay to the frame rate you need (for 30 FPS, it’s 33 milliseconds).
Check ‘Use delay entered above for all frames‘.
Click Export!

And there we have it! A great looking GIF!

Here are a few things to remember :

Be mindful of the size of the game screen you use, as this will directly impact the file size of your GIF. It might not seem important with disk space and bandwidth being so cheap these days, but know that Twitter has a 5 MB limit on all images. If you thought about this too late and don’t want to start over, you can always resize it with VirtualDub.
If you do not have the same lighting problem as I do, you can just export directly from VirtualDub as an Animated GIF or use GifCam.
There are many online services that will help you make a GIF, but I’m more oriented towards traditional software. Having tried absolutely none of them, I wish you good luck in your explorations. Drop me a line if you stumble upon a better way to make these animated GIFs!

I hope this helps someone make some great looking GIFs for their games. Next time we will definitely talk about Pixel Perfectness and multiple resolution.

Cheers!

Let’s make a Great GIF – Part 1

Posted on May 12, 2016 by ScoundrelCidAdmin

Hi guys,

A little bit of news… While I’m working on my posts about pixel perfection, I thought I’d share some things I learned last week on how to make a good GIF of your game with some free tools. Also, I would like share the latest GIF from People of Aionos where we see Victoire fighting two cartel enforcers.

A great GIF of your game can easily display your game in action without the need to make a video and it’s easy to share on social medias.

Latest GIF from People of Aionos

In the first part, I will detail 2 techniques to make a pixel perfect GIF of a single character’s animation.

Pixel Art Character GIF Animation

In order to create a pixel perfect animation of your characters, you need to control the time of each frame perfectly. To achieve this, we will make use of 2 free softwares: GifCam and GIMP.

GifCam

GifCam is a free screen capture software with frame editing abilities, that always stay on top of all other windows, so you can easily move it and resize it to the desired area even inside a game editor like Unity or GameMaker. GifCam allows you to take individual frames and control the time delay for each one.

Load each individual frames into either GIMP, Photoshop, Paint or simply Windows Photo Viewer.
For GIMP and Photoshop, add a bottom layer for a background of your choice (in our case, a simple white background).
Make sure that only your first frame is showing.
Center GifCam on top of your image and click on the ‘Frame’ button to record a single frame.
Do this for every frame in your animation without moving GifCam.
Click on Edit and adjust each individual frames delay value to the time of your animation. This is done by clicking and holding on the delay value and moving the mouse left or right.
Once you’re done, just exit the Edit screen and Save!

GIMP

GifCam is great, but I found out later that I could do everything with a photo editing software like GIMP or Photoshop. In this tutorial, I will use GIMP, since it is free and open-source.

Open GIMP.
Make sure that every frame of your animation has the same background.
Open the first frame in your animation
Click File, choose Open As Layers and select the rest of your frames.
Go to Filters -> Animations -> Optimize (For Gif), which will reduce the size of the file and open a new window.
Edit the time of each frame by changing the value inside the parenthesis.
Go to File -> Export As and name your GIF.
Un-check the ‘GIF comment’ option and check ‘As animation’.
Click Export!

Et voila! You now have a GIF that is exactly like your Pixel Art animation. In the second part, I will cover the making of screen capture GIF for the complete game screen and how I found a solution for a small lighting problem I stumbled upon.

Cheers!

Title Screen and more AI

Posted on March 25, 2016 by ScoundrelCidAdmin

Hey Guys,

It’s been a while since my last post on the site, but it’s because we’ve been hard at work on People of Aionos! Enough progress has been made so that I can update this blog more often.

First off, I would like to share this jawbreaking background for the title screen of People of Aionos.

Wow. It shows the city of Inirion, the capital and biggest city on the remote world of Inir Fog. What was once a small mining city under Republic rule has grown into a full metropolis. The city can be separated into three distinct sections:

The rich and influential citizens live in the Upper Rises, far above the dust storms that frequently hit this region of Inir Fog. Up on the mountain, the air is dry and warm, and people wander happily along its sky bridges, enjoying the promenades’ boutiques, restaurants and green areas.
The heart of Inirion, and the source behind for its steady growth, is the Industrial Sector where the precious ores found in the surrounding mountains and canyons are transformed and shipped to every corner of the Empire. The Industrial Sector is relatively well protected from the dust, as it rests at the feet of the Inirion Mountain.
Finally, the rest of the population lives at the base of the skyscrapers, in an area of Inirion that is often hit with dust storms: the Dust Pillars.

Secondly, the AI of People of Aionos has undergone a major overhaul since our last post. We used to have a behavior tree system that runs with RAIN AI and everything was running fine until I tried expanding the system for more complex behaviors. The behavior trees were getting huge, harder to maintain than necessary and some performance issues started to creep up when having multiple NPCs.

So I looked for an alternative and stumbled upon the Utility Theory that made making choices for an AI easy. Decision Flex has a great implementation of it for Unity. But once I had my AI’s choice made, I had to implement those behaviors and decided to code my own Behavior Manager for it. It acts like a State Machine, where the current state is decided by Decision Flex.

Unfortunately, using Decision Flex and dropping RAIN AI still left me without a pathfinding system to guide my NPCs around the map. So I turned to an alternative- that I had dismissed earlier because it used grids instead of navmeshes- Apex Path. Ever since I’ve been working with it, I have found Apex Path to be fast, reliable, easily customizable and it allows for easy Dynamic Avoidance, which I couldn’t get with RAIN AI.

Until next time where I will discuss the different ways of getting People of Aionos Pixel Perfect with multiple resolutions.

Cheers!

AI : Perception

Posted on June 10, 2015 by ScoundrelCidAdmin

Hey guys,

During the development of People of Aionos‘s AI system, I came across quite a few problems to solve and I thought I’d share what I’ve learned in case anyone runs into the same kind of trouble. I will write a series of blog posts, among the game’s updates, about different bugs I’ve encountered putting together a game AI with Unity, starting with AI Perception.

An AI perception system simulates the real senses of a person, usually sight and hearing, and transmits the relevant information to the decision system. Both senses need a way to detect if something of interest, mainly the player, is in range of the NPC, but the desired object has to be in the Field of View (FoV) and the Line of Sight (LoS) of the NPC to be seen. We can solve this in Unity by three different ways : Colliders, List or some 3rd party solution.

Colliders : With this option, you simply attach a sphere collider, as a Trigger, to any NPC and write a script that reacts on the OnTriggerStay function. Unity’s tutorial section has a good tutorial on it right here. This option is quick to implement and doesn’t require a lot of code, but I have found a problem with it while testing People of Aionos on an older computer.
Lists : With the Lists solution, you have to keep centralized arrays or lists of every possible object that might be of interest to an NPC (Player, Munitions, Sounds, etc…). Once this is done, it’s a simple matter to search, in the Update function, the content of those arrays and to test each object for distance, FoV and LoS. This option requires more time to develop and requires more code to manage than the colliders option, but it was my solution to the performance issues faced with the colliders.
3rd party solutions : There are plenty of great and usable solutions on the Unity’s Asset store. Most of them include another AI system in them, like navigation, decision making and communication between NPCs. I will not go through the entire list of solutions and tell you which is the best as I have found this choice to be a matter of personal taste between code clarity, support, functionality, API’s, documentation, etc… But I will point out something to consider for any of these solutions : Yes, they will do a lot of the hard work for you, but some modifications to your code might have to be done in order to make them work properly and they will require time and energy to master.

I personally toyed with all 3 of these options before finding the right one for me. I started with what I found in every tutorial online, using colliders. Sadly, while testing People of Aionos on a weaker system than my personal computer, I’ve found that perception colliders attached to multiple NPC’s at the same time, 15 or more, incurred huge slowdowns and performance issues. It took me days to track down the source of the problem and discover that all of the sensory colliders close together caused the performance dip. During this search I learned a lot about optimizing an AI along the way, which I am soon going to share with you in another post.

Since colliders were not a possible solution, I’ve decided to test out centralized lists and 3rd party options. I have found the list solution to work easily and without any performance issue and this solution was satisfactory for months, that is until I needed more complex AI decision making options. I tried a State Machine, but it wasn’t a realistic option, so I turned to Behavior Trees which worked marvelously. Finally, it’s while searching for a solution for my Behavior Trees in the Unity store that I stumbled upon Rival Theory’s RAIN. After some getting used to, I switched my NPC’s perception system to RAIN’s, which has great performance, visualization and support.

I’ll be back next week with another post about the progress made on People of Aionos and a little bit more about its universe.

Back with more People of Aionos

Posted on June 2, 2015 by ScoundrelCidAdmin

Hey guys,

We’ve just finished migrating the website to a new server because the old one had to close unexpectedly. In the transfer, some data and blog posts were lost and so we are starting again with a new site, a new design and new information about our first project, People of Aionos.

Since our last post, a lot of progress has been made with the world building and the game mechanics. We are also excited to have awesome graphics developed by our rocking artist, Edwin Jang.

So here is the jist of it: Mankind has left Earth for the stars. Centuries after its departure, People of Aionos tells of the dawn of the 3rd Aionosian Civil War. The story is seen through the eyes of the citizens of the outlying world of Inir Fog.

The Empire of Aionos has been in existence for close to 300 years and it has become riddled with greed and corruption. All strata of society suffer from some form of abuse. Now a derelict system, the Empire used to take care of its citizens with essential services like education and health care. It has long lost its civil responsibility and fraternity and has tightened its security and control over its people.

As the game begins, a hero appears on the remote world of Inir Fog. You don’t get to play him yet, nor do you get to play the Governor of Inir Fog, the head of the Imperial Government on Inir Fog. Instead, you will live through and try to make sense of this conflict by seeing it through the eyes of several different citizens: hard working miners, aging police officers, scheming politicians…

In the coming weeks, we will present our characters and their stories, driving forces and fighting abilities. Here is a little preview of one of those people:

Victoire, Inirion Police Sergeant

On the gameplay and mechanics side of things, I used to plainly describe PoA as Secret of Mana meets Deus Ex: Human Revolution. But I think that descriptive isn’t as clear and effective as it could be, People of Aionos is more a Sci-Fi Twin-Stick Secret of Mana.

Twin-Stick because the controls work with a dual analog system (or mouse and keyboard).
Secret of Mana because of the Sprite Art, the camera’s point of view and its power selection.

I will also add that People of Aionos will feature a collateral damage system where your actions on and around the population will have a direct effect.

I won’t tell you all of it today, more will come in my next post. See you soon !

Hello Gamers!

Posted on May 17, 2015 by ScoundrelCidAdmin

Scoundrel-Studio`s website is currently migrating!

We will be back during the coming week with a new site, new information and new content!