next »

[neutonm]

Visual Tutorials

Before the events of "Kill the HUD" there was another design question that required attention. Some testers who played the game were to lazy to read few strings of tutorial messages or didn't get what was it all about. I tried to be brief as possible - less words in dialogs, more gameplay. But teaching player how to play couldn't be done either way. So i proposed idea to my friends, who tested the game, of having gif animations that will aid messages and they agreed that this idea might be very helpful in teaching player.

Here we have it! Now some tutorials will display GIF animation on mid part of the screen showing player how to do stuff. I've used algif 5 for gif animation support. There was a slight problem with drawing non-transparent animations so i asked for help in allegro forum. The author of addon himself made a tweak to the library and that saved the day. I didn't wanted to include videos into game as that was considered to be overkill.

[neutonm]

Further Polishing

Note: I've updated first post, almost completely rewritten it.


There was a lot of polishing this Summer and only now I recalled about this topic. Although the pace of workflow was rather slow there was still some progress.

I've completely finished the cat. Apart from fixing bugs a series of animations were drawn. Each of the animation has its own audio sample. Yeah, lot's of meowing involved 

Some unfinished stuff that were present only at specific levels were also completed. It was mainly the drawing part with audio engineering.

OF course the most significant update is the inventory system.
This...

Became this:

Now i'm reaaaaaaaaaally proud with the result. It turned out beautiful, well, at least if you compare with the old version. This new version of inventory is more versatile: it's more informative and includes all the important information and values player needs to keep in mind. Apart from eye candy new inventory screen became much easier to navigate.

It took quite a long time to finish it as this was my first serious graphical work. Lots of things were new to me. Besides, it was the beginning of Aseprite era. I switched to it from Photoshop.

[neutonm]

Victory & Defeat

There was nothing in afterlife level winning or failing before and that was sad. The level simply restarted or game silently moved to another level. Now, it's totally different story! Smintheus received its personal "Victory" and "Game Over" screens.

Victory Screen exploited "floating text" effect to the maximum and introduced score to the gameplay arena. There is animation, score count and smooth transitions followed by rich set of sounds and accompanied by a celestial soundtrack. If player manages to unlock some achievements during level progression then they will be shown after the score is counted and softly transit into next screen. 

Game Over Screen enters the scene with a deep reverberated gurgle-like sound followed by a very sad melody performed by electronic bell sound. Our poor mouse just got his ass kicked, mourning time. It's not just words that appear on screen stating the obvious but the set of options you can execute in "afterlife". Restart? Load last save or other save file? Or maybe you had enough for today and just want to get the f**k out of this misery 


Music

Victory Music: https://soundcloud.com/neutonmouse/smintheus-ost-victory-screen
Game Over Music: https://soundcloud.com/neutonmouse/smintheus-ost-game-over

[Spidi]

Wow, look who is here
Totally missed your TIG devlog even though I roam around here daily .

Just saying hi to subscribe to the topic
Keep up the great work !

[neutonm]

Holyshit man, didn't knew u were here.
Looks like every dev is here, i should browse the forum with more dedication.

Thanks and Hi as well! The work will keep being good, especially here.

[nathy after dark]

I'm a fan of the sadistic premise as you've outlined it on the first post.

[neutonm]

I'm a fan of the sadistic premise as you've outlined it on the first post.

If by that you mean the story overview then... yep, there is a bit of sadism here.
The reason will remain in mystery for most part of the game 

Maybe players don't need a reason at all... 

--------------------------------------------------

Comeback

Almost all beta testers expressed their frustration towards the fact that character can't return back. Well, he can but what they actually meant was movement cancellation. This complaint was emerged from very first level, the last part of it, where player were ought to guide Gerald manually through a small series of islands surrounded by "deadly" water. They often got wiped despite having 3 hit points on their back and they wished one could turn back once a button was pressed without purpose or whatever reason there is.

It couldn't be done that easily. This is grid-based game after all and in-game movements are really just smoke and mirrors. Technically, character finishes the move right after button is pressed. Since that beta test held its place almost year ago, i ignored this problem because dealing with it meant touching the "Core mechanics" code. And... that's very frightening. Anyway,the fear was meant to be conquered!

It took some time but it was worth it. The core was heavily altered. Not only the problem was somewhat fixed but I gained full control on character movement speed as a side effect, rather pleasant one! Classical movement speed could be set in few numbers and range between these speed factors was relatively big. Today, i can afford tweaking velocity in any nubber, say i want to add 5% boost to it, so 5% it is!

So far so good,
Cheerz mates!

[neutonm]

Tweaking Map Editor

Got really tired of the old ways of making levels. There were basically no hotkeys and every level element whether it's object, tile or light required unnecessary clicks. Get to the editor, get to the element type page, pick element, exit editor, place it. Want to place element that comes next to current one? Repeat the process... grrr.  

So I've put hotkeys first and level editing turned out to be much faster. Next, complex levels resulted mess over the game screen. Triggers, tiles, objects, walls, custom stuff, waypoints... were over the place. There was need of some kind of filtering so I did what i want to do long time ago - add ability to turn on/off element type layers. That was awesome move towards being editor a pleasant one rather than necessary.

Each cell in this grid-based system contains info about these elements. Sometimes cells were bloated with these elements, especially when that cell had 4 tiles. I had to know exact numbers during scripting and the only way to know it was the usual way... like get back, look,e etc. That's million clicks! The need to display info over cell was very strong but i didn't wanted to put it somewhere on screen (like one would do with the classical gui). Plus I wanted it to be compact. Compact was the keyword. Here is what we got now - a series of numbers displayed as a "tooltip". I've put corresponding colors to the existing one in editor pages to make it easy to distinguish.

Now level editing is super fast and is pleasant experience!  

[neutonm]

The Map Screen

Most games has this "world map" feature where players progress through levels. I recall few NES games in past that had similar feature (Super Mario Bros 3, Flintsones) and other older games like "Pekka Kana 2".

There few reasons that pushed me into making this:
Story Following - the story is scattered in a form of dialogs across the levels and few cut scenes and it's quite easy to perceive these remnants as separate things. This will help to gather most vivid story elements and put them into one big adventure summary.
Level Manipulation - navigate through levels, play and replay them for better score if you wish. In this level you can skip levels, might be useful to come back after while and try them once again but now with more strength.
Game World - it shows the game world, more specifically its geography. This could really dive player into the game, feel the atmosphere, break the "Level-to-Level" mindset.

The map emits fun! It connects major gameplay with the rest part of the game allowing the gameplay process to flow smoothly.


Making this was a bit difficult and here's why: before this I never actually drawn anything bigger than 128x128 (as a whole picture) so it took quite a while. I'm had this obsession of not using same parts over the map so the longest part of it was drawing mountains. There are hundreds of mountains there and none was copied. Although they look pretty the same, there is some "life" in them.

As a result i got huge experience boost towards drawing which became quite useful later (i'll about it next time).

When map was done it took a bit of challenge to make smooth zooming in and out camera. I wanted it to be pixel perfect and have transition tweens. IT turned out to be a big mess in code but it works like charm! Next levels started to "hold" best score and other minor data, have their own special icon and description. Later the map received "sun light" and floating clouds. Things started to turn beautiful!

The last part was nailing the GUI both visually and technically. That was the easy part. Although the first version of GUI looked pretty static so animated it through code to make it look more alive - everything was "breathing" and that looks awesome!

Finally i recalled that i have to connect all other game screen states to the map. That's it! I'm not fan of perfectionism but here I done my best and i'm very glad of the result.

[neutonm]

The Main Menu: Before

This fat-ass step was terrifying even to think of. I was very afraid to deal with that I constantly kept moving it further in ToDo list. I didn't knew how to make it. Not code-wise, that's piece of cake, but make it visually appealing.

Gotta face the fact of all skills of mine drawing is the weakest and it served as a source of fear. The main menu is the first thing player is going to see. First impression comes from that sight and tell me, what impression you get when you look at this?

Yep, it sucks but back then it was best "looking" solution . Now, I have to face this because it is inevitable. No idea what to do... but no matter what I must keep going. It kept being ditched for quite a few months and now it's dead end.


The Main Menu: Fresh Start

Since I learned a lot from drawing Deviated Valley map for the Map Screen it wasn't that scary to start drawing as it was before. A thought came up that maybe it's best to do same planning I had done with the rest of my skills whenever I had to make something above light weight to drawing as well. The only planning I had with drawing before as little hand-drawn sketch in notebook. Sketches usually started with 3D figures and morphed into something more distinguishable. I know, i tried with bigger ones and it always sucked.

For general look of "The Main Menu" screen I came up with the idea of having natural scenery that had sign with the boards for main menu buttons. Somewhat generic idea but fuck it... let it be. I took few lessons about perspective drawing (yeah, i didn't knew about it till now) and sketched my first landscape picture in my life. It could work I thought!

Now what? It easy with sketches on paper unlike on computer screen. How do I start drawing enormous picture?  

Hehe... i cheated! I started drawing sketch for this enormous picture in very small resolution. It turned out to be like this:

Not good, right? It shouldn't be, yet. Just a sketch. Helped me to position things. A rule of thirds was injected. Now I had some ideas how to proceed further. The obvious next step was to scale it to desired size and start doing whatever there is.

First target - frontal plane, the road! After couple of hours doing wrong stuff I ended up with this:

I liked the result and finally that fear started to fade out. The next thing I did...

WHOOPS! Gotta go! To be continued so stay tuned, folks

[neutonm]

The Main Menu: Drawing
Road Sign

I'm back!

There's no stop on the road. I decided to go with the sign, the tree looked pretty intimidating to work on next. Wooden pillar appeared and took quite a number of layers to make it look like a wooden pillar. The first board was drawn and I had to play with it for some time, redraw few times before the final version rendered. Copied it over and over and played with rotation. Copying was awful since Aseprite can't copy multiple layers at once so i had to it one by one. Little bit polish after that and va'la - we got ourselves a nice looking road sign.Boards will operate as buttons as previously stated.

Tree
The next target was tree. Just like most things i haven't drawn yet the tree was one of them. Fortunately it went well without redrawing it over 9000 times. It turned out a bit muddy - flat version of tree wasn't really appealing to me so muddy it is. To make it look interesting I had to draw hollow. Got some ideas for the hollow in near future so I kept it. Finally, tree branches. Well this was very intense experience. After few failed versions I managed get best but it required a lot of effort. Had to draw each leaf manually and it took few centuries to do so but hey... it was worth it! My first tree ever.

Mid Plane

So, what we have here is decent frontal plane folks! Now it's time to move further. I decided to draw both mid and back plane so that I could have general view of the image. Didn't payed much details on it. Bridge was the problem. It had much perspective juice in it at which I was rookie. River turned out to be overcomplicated at this point.

More Trees

Field in the mid plane was somewhat boring. It was asking for a tree. Yes, I'm breaking my own balls here with this creative flow. However, mission was important - make it look good! That tree was pain in the ass but not as big as the original frontal tree. Too much repetitive shit, at the end i was sick of drawing leaves but as before... it was worth it!

Sky and Bridge

When the next step was the sky I was forunate enough to encounter a special tweet where some guy showed compilation of cloud tutorials made by 3 Pixel Art Gurus. They were @saint11, @pixelhenk and ... damn it can't recall the third one. That pretty stupid because i've picked that third's guy tutorial. Studied the pictures and tried to imitate. Wasn't ideal as the author's one but boy they fit good.

I've erased that good for nothing bridge and started experimenting with it. It had like 6 variants, all of theme had one theme. I was bashing my head to the wall, pure despair! But theeeen, after one good hit on the wall, i decided to blend two themes to make the bridge of my dreams - wood + rock. It's pretty big wow to me.

And then again, these fucking trees. this time i did some nasty copy-paste but even then... I had to add a bit of juice to make it look different.

Yep, yep, yep! that picture started to be something!

Final Things

Very close to the end. Very! The left part of the mid plane was empty so IT ASKED FOR A STUMP. Dear god, why i'm like this? Just leave it as it is already! No, we need stump. Life sucks without stump!

Simplified the river thinking it will be worse but hey, sometimes being minimal is what's important. Cleaned some pixel trash. Added more grass and other tiny plants. More Rocks. Yeeeah, rocks. Add more rocks so the picture will rock! I always feel like in any unclear situation one must add rocks.

Far tree and it's tiny little brother got themselves drawn in a right way. Sign received temporary buttons which later turned out to be permanent but in a other color.

That's it! The picture is done and next post will cover something really amazing done with this picture.
Thanks for reading!

[neutonm]

The Main Menu: Animating

When the picture was over I stared at it for long time. Yep, I impressed myself... but something was missing. It was damn still! There was no life in it. After a long and deep sigh, realizing the amount of hours to be spent very soon, I emerged deeper to make it alive.

First off, I had to cut the picture into layers and make a good texture atlas out of it. The idea was to put some motion into back-mid-front planes, make them "float" thus creating an illusion of perspective. It turned out awesome although a bit weird.

The sun comes next.  I've put few blured and smudged copies over it and made each one rotate around the sun separately. Little bit of scale-in and scale-out made the day clear . Although the light was coming from the sun it ignored the rest of the scenery and I've included the already done effect of yellow-purple gradient rendered with additive blending and having a pulsation over its transparency.

What was bothering me was the river. I've cut off it from the mid plane and rendered behind the plane with seamless motion thus creating some sort of stream effect. No stop here! I experimented with shaders casted on that river piece. Shaders are still something new to me, although i have figured out a lot. But lack of vast practice turned out experimenting into 2 hours. Result was very satisfying - cos/sine distortion on water texture made it look like a real river with its waves.

After that I had to face these goddamn trees. Divided them into clusters and made them "wave" as if they were affected by the wind. Like it wasn't enough of hard time with the trees in past... making them wave was another pain-in-the-ass episode. I've seen similar effect in most vector games. Well, those games have "skeletons" and it's easy to make these animations. Smintheus is not a vector game and owns no of such mechanics. It had to be done in hard way. Thankfully, my ancient debugger came handy which helped me to adjust lots of values during runtime. It was necessary to turn off pixel scale shader and turn on linear filtering cuz animation was laggy enough due to lack of interpolation.

I made it! Made picture alive! This was the moment when one needs to stop and move on next things but hey... i guess you figured it out

I've made 3 animations via Aseprite and put them there. It was a fish jumping over the bridge, little bug on right bottom corner and of course, my masterpiece, The Drone. Remember I said i have plans for that front tree's hollow? This drone was the plan! Perhaps making it was the most exciting experience.

The final touch was obviously from coding side. Had to fool around with buttons to make them look and work like a charm but it wasn't hard enough. Added couple of things like "difficulty selection windows". Then came sound design which was hard only at one moment - doing synchronized animation sound for the drone. That's it, folks! The hardest time of my gamedev is over. It's a pure win-win! 

Here is a video showing the final result of the work.