Making water with simple interactions

I spent the last days drawing water for Cape Bleue, and coding how it interacts with characters. You can see a GIF of the result here. Someone on Reddit asked how I made it, so it could be a good idea to show here the process I followed.

I began with a drawing of water tiles, in Pyxel Edit.

It's not animated, and still not in Unity, but I did a quick mockup to see how it would render with game's background and characters.

It's good. I want this in my game! The only problem I noticed was the upper line, making the character looks like it's behind water and not in it :

So I reworked everything properly this time, keeping in mind how I would concretely code all this.

For technical reasons I couldn't do animated tiles, so I separated the tile in 3 main parts: water line (extensible horizontally to match puddle's size, and will be used as a detector for collisions), animations (bubbles and herbs), and water (a simple color, extensible easily).

I did simple animations, with just enough frames for bubbles to loop : 

 

Placing this in Unity is simple. Water line and water color (set with transparency in Unity) are extended all along the pool size, and I put animations one next to the other:

Putting character behind water, but in front of water line is a quick setting of the Z position of every object.

The next thing was coding interactions, splashes for entering /exiting the water, and other splashes for moving. Back to Pyxel Edit, I draw splash animations, one big, one small:

I can't give the script for all that follow, because there isn't. I made it with Playmaker, that allow me to code in finite state machine. I can explain what were the major steps.

This is what my scripts look like.

I have 4 main scripts :
- The first one, placed on waterline, detects collision with player or enemy objects (in playmaker, it is "Trigger 2D action" with "on trigger enter 2D" as trigger value). It has a dozen splashes objects as children, all desactivated. When collision occurs, it activates one of the splashes and set his position X to the character detected (the Y value stays the same, as it is waterline's position), and desactivate some of the others.

- The second one do the same with "on trigger exit 2D" as trigger value. I can use it to add a different splash animation when the character jumps out of water.

- I have a child object to the player's character that detects if it is in water (in collision with water line object). The bool variable "inWater" just created will allow me to slow the player when in water or other things like this (not done yet). After this, I check character's speed, and if it's more than a certain amount, the script sends an event to the fourth and last script...

-... which shows small splashes. It is very close to the first one, the main difference being it doesn't trigger when collision occurs, but when player object (and every object that has this script) sends the right event.

The result can handle a few characters making splashes at the same time. The major flaw in my process is bubble animations that need to be remade for every different value of depth of water.

I think it works great, so I'm happy with it. All animations could be changed or polished to have a better result, now that I'm not in the hurry of drawing-what-I-need-for-coding anymore.

Thanks for reading!

Combo

I worked mainly on platformer mechanics these last weeks: grip on ledges, zipline, ladders, etc. Everything works fine so far, and the game begins to be enjoyable on this side.

However, all the fight mechanics and scripts haven't changed for a long time (in this post I showed my process to make the main character's attack animation), and they need a lot of work.That's what I'm on these days.

I started to make new attack animations. These first 3 animations below are meant to be a combo. 

Crouch attack

This attack is triggered when the player attacks while blocking. It pushes enemies and can break their guard, or pushes objects violently... In my dreams. For now it's  coded like a normal attack, with more bugs.

The animation I used before this update. I plan to use it if UP is pressed when attack is triggered.

Jumping attack

Animating is hard! These are far from perfect but they are usable while programming. 

I still have a lot of work on this (mostly on the way the character will move on X axis while attacking, and better timings on enemies' stun so it really has the effect of a combo), but I'm happy to be already able to show in-game karate action:

(click for full size)

Twitter

I have a Twitter account: https://twitter.com/MKD_games.

I'm currently working on new attack animations for player. I plan to add a 3 hits combo and a air attack. That's hard but I hope I'll finish soon & show it here.

Voxel! making pixel art in 3D

I continued my work on Voxels. I'm still not sure if it'll be useful in Cape Bleue, but I like this process, and I thought I could show it here.

So I start with a small pixel art truck I draw a few weeks ago.

original size (x1)

size x3

I import it in Qubicle (I don't use MagicaVoxel anymore, it was a nice little soft but it lacks necessary functions like copy/paste or move) and extrude the form to the depth. I won't explain the process again as it's quite simple (it's just doing pixel art in three dimensions) and I already did a quick explanation in a recent post.

Work was 75 % done when this screenshot was taken : extrude is done, headlights are OK, but the wheels are not "cut", and there's no license plate yet

After some time sculpting it, I'm happy with the result.

Now I can view the truck on various views, and start dreaming about all the games that could be done with nice 3D assets like these :)

I can also generate variations around the first image in this post, with slightly new angles (but still in side view so it can be used in projects like Cape Bleue), like shown below :

I think this render, for example, is a far better drawing than the one I did in pixelart.

And finally, a good ol' gif showing the truck on every (side view) angle :

Hope you liked it, thanks for reading!

Zipline

This week end I coded two important things for level design : ladder climbing and ziplines.

Here is a video showing a quick fight and how zipline is used. You can see it below as a gif, or here on http://gfycat.com (5 times lighter)

Birds & early concept art

In order to add life in the game's world, I plan to make a lot of non-gameplay stuff like the birds you can seen below. They do their bird's stuff, and when the player is detected, they escape. Speed and other variables may change, but the idea already works great. (click for full size)
 

Unrelated: my friend Mathias just began to work on concept arts and designs. Here is the very first official concept art for Cape Bleue. It's far from being finished so I shouldn't show it here... But I love it and couldn't wait.

New tileset & voxel tests

Very quick update this time.

I'm rebuilding the levels in Unity, with a new rocks & dirt tileset. The dirt is a slight rework of the old dirt tileset, and rocks are all new, made by me with the help of Mathias.   

A few days ago, I tried to transform some pixel graphics I made for Cape Bleue in voxels. It was only very quick tests on newly discovered software (MagicaVoxel), but the result is interesting. I plan to do more of this.

The two next pictures can help to figure how it's done, and why voxel is different from classic 3D modelling : I upload an image (here, a red car) and extrude it to the depth.

And from this point, I can sculpt the form very easily by adding or erasing little squares. The yellow car is half-done (only the front is sculpted).