u/AleksejFonGrozni — reddlx

🔥 Hot ▲ 293 r/gamedevscreens+2 crossposts

War Diary, a moment of tranquility

Hi all,

this is a scene of intermezzo/relaxing between days where player can rest a bit, read through his diary, reconcile with the past events. Hence the warm colors as opposed to cold blue submarine surroundings.

Everything is hand painted, multilayered in GMS2 with polygons, surfaces. There is a visual issue of rotating the ink pen which (as any other code/manual rotation of pixeled graphics) creates a bit of edge twitching. Not sure how that can be resolved, maybe by painting the frames, creating spritesheet animation.

Funny thing, creating speckles of dust took twist and turns but in the end, what really worked the best was one 1x1 white pixel, code painted with alpha and added turbulence. Trying to make a spritesheet of dust particle disappearing/transforming did not end well.

There is one bug with the textes that those with keen eyes will find.

u/AleksejFonGrozni — 1 day ago

🔥 Hot ▲ 192 r/gameenginedevs+1 crossposts

[OC] Using surfaces and polygons to recreate water

Hi everyone,

in my previous post I've covered general setup and pipeline when using surfaces, sprites and polygons to recreate paper behavior. Since False Echo game is set aboard a submarine another important thing to do was to create water itself.

The approach is somewhat similar to my previous post, the main difference being the number of stripes, behavior of selected vertex points and ideation and realization of that idea. I will talk in general terms, since most probably you will have similar but not the same issue to resolve. Hopefully this will help you and give you ideas how to maximize Game Maker Studio potential.

Goal

To put it simple I wanted to have sky, water surface, to see submarine submerge and surface. And that's it. I didn't want to use shader (even though that is a viable and very good option). Instead, encouraged by the paper folding progression, I've opted out for the surfaces/polygons.

Vertex that thing

So the first thing for me was to create a polygon object, draw sprites onto it and then to visualize the points:

Sky and water, all together

In the beginning I've made one major and big polygon object with several rows and quite a few columns. That worked up to a point. The biggest issue was movement of those points, presenting semi transparent part/layering.

Probably the coolest side-effect of this was the fact that I could use certain polygon part and draw it on another, flipped, semi-transparent, to create reflection:

Liquified submarine

Multilayering

To achieve fake water depth, not just vertical but spatial on a forward axis I've added additional layers behind. At first I thought they are gonna stay like that, static.

https://preview.redd.it/9i7v2dhq8dwg1.png?width=1276&format=png&auto=webp&s=072869b47bdbea5b23927446a760d2f21472d3ee

Now I was able to move only certain vertices, to adjust their Y position amplitude and pan around X pos. What also proved to be cool was spreading one row on X axis, to fake that depth:

https://preview.redd.it/avsso5qy8dwg1.png?width=1277&format=png&auto=webp&s=7a351e22207159af424b394b86553b4033510ed0

You get practically a horizon fading in the distance that way.

Debug the points

At any given moment be ready to draw red, green, blue (whichever color you prefer) dots to assist you in proper positioning. Since my submarine is cut in half (you see part sticking above the water and part under the water) I had to cut that internal wave that represents the real border between depth and surface. In this image you can see that purple points are not following the white stroked circles. It means that my formula for waves was not coherent for upper and lower submarine object. It was easily resolved by having one object as a global calculator and variable holder from which both parts inherit the values:

https://preview.redd.it/upntg2i99dwg1.png?width=1171&format=png&auto=webp&s=3729ce005daebffb0f7b75ace79b82e69f4beec6

Semi-transparency

Once both top and bottom submarine had the same "cut" which behaved in the same fashion I was able to make the top water layer semi transparent. It meant that I could multi-layer (sandwich) parts more or less easily

https://preview.redd.it/3azraxzx9dwg1.png?width=1285&format=png&auto=webp&s=eb653f1582bfd4e63778bb3da8e80f5043a44328

In the end I could get:

object that renders the sky
object that renders the water
object that renders the submarine
object that collects all of that and renders this complex system into a single surface which could be moved, shrunk, cut, modified

https://i.redd.it/p1kikzbbadwg1.gif

Hope that this would give you some ideas how to maximize the potential of Surfaces and Polygons. I believe you can use this for rivers, flags, curtains, canvas, capes, sky...

The only thing you need to really worry about is how to properly set the surfaces themselves. You need to clean them so they don't leak especially when switching the rooms or destroying/recreating objects.

Images available in a gallery:

https://imgur.com/gallery/water-polygons-VvApen6#opwzPjT

u/AleksejFonGrozni — 3 days ago

▲ 16 r/animation

Pixel Art animations of characters, noob veteran animator

Hi all,

dunno how to start this post. I've been animator for some 12+ years now (among other things). Can't say I am among the best ones but I've been able to keep up the pace with dedicated 2D and 3D animators in the companies I've worked with. Learnt how to animate in Maya, Max, Spine, Flash/Animate, made animations in Mecanim in Unity, in Game Maker, Richard Williams is a household name in my house. Animated tanks, trucks, cannons, humans, airplanes, building collapse simulations, made YT videos for Simple History, animated characters in F2P games (humans, pets, dragons, witches).

And I thought that I can cope with any situation, more or less. Usually I get (or make) a model, rig it, animate it, import/set it up in the engine, connect the dots. And then I met with the almighty pixel art animations.

Never in my life did I face such "self-control against the rage" requirement until I started making my own pixel art game. To make matters worse I picked Game Maker Studio. Not that this is a bad engine, it's just that editor is lacking some basic functions.

But to cut the story short, I've started hand drawing the characters (in this case officers and sailors for the submarine crew) and started using Photoshop for that purpose. People rightfully asked me why not Aseprite or simply drawing in GMS editor?

They are right, those tools are rather good, you can quickly jump between frames and correct/adjust, onion skin and so on. But I guess I am old school.

I like to keep characters in a line, the same line I will export later on (as a spritesheet as GMS takes those sprites in a form of a strip, left to right). But I think the biggest drawback and biggest hurdle for me was: how to animate a face of a character that has literally 5 pixels? How to show facial features, how to make rotation? A lot of trial and error. A lot of hair pulled out.

(then someone rightfully said: dude - you need some sort of outline, that's probably where I snapped)

In the end (or I would say middle since I still have a lot of actions to animate, states and so on) I will risk to say it did not turn out that bad. I've placed those characters on a rather small submarine interior (as seen on the second GIF) so I think it's good enough. Although it can always be better. One lesson learnt sure is: draw face first, then the rest. Seek the smallest possible resolution and make it work there.

I had to tell this to fellow animators, hence why I posted here. Haven't talked to an animator in a while, I feel much better now when this went out. I would dare to say that I am a veteran animator who went back to noob by 16 px character.

u/AleksejFonGrozni — 6 days ago

▲ 35 r/gamedevscreens

False Echo - OBSCURA M3 Encryption Device

Hi all,

this is OBSCURA, imaginary friend of a well known Enigma. Pretty similar machine, rotors, cables, buttons and lamps. Though Enigma is way more advanced, I have less combinations (but still fully capable of encrypting/decrypting messages.

It's made using sprites and surfaces (GM engine). This is how it looks like when opened (to check the rotors):

Imgur

Unfortunately, working with surfaces means that we wont get pixel perfect results (surface bleeding) but that was the only way to effectively create panel opening and fake 3D panel rotation.

This is a pivotal device of the game False Echo:

https://store.steampowered.com/app/4418080/False_Echo/

u/AleksejFonGrozni — 7 days ago

▲ 46 r/gamemaker

Using surfaces to create paper-like behavior

Picking paper up and flipping it

Hi all,

while making False Echo game in Game Maker Studio 2 I have stumbled upon the possibility of using surfaces to create paper-like behavior. I will try to write and show how exactly I did it and it might help or give further ideas to others in resolving their own situations.

The Goal

First and foremost, my objective was to provide player with a piece of paper where either player or machine can have some sort of input. To write, stamp, to machine-print letters and such. My inspiration was a well known game Papers Please and that was basically the starting point.

Under normal circumstances I would just create a simple surface, draw background sprite over it and then anything else that comes from the player. That was an easy part. But then I thought: let's have some kind of animation for it.

First Takes
I had two options at that time: to make spritesheet drawn animation or utilize Sequences. Since I was quite fresh with the new GMS2 I took spritesheet path and the result was not that satisfying.

Old \"reveal\" spritesheet animation

Even if I had succeeded in making this look good there would be rather big images in the sheet and there was one particular problem I couldn't resolve - how to get this:

Have something drawn on a paper and then deform it naturally

Surface to the rescue

So my wish was that I could draw something on it and then deform it naturally (paper hardness/bending). There was only one way to do it (if you know another way pls let me know): use a surface and draw directly on it.

Now surfaces are very very VERY powerful tool. You can tweak a lot of parameters and define a lot of things with them. But creating a surface is one thing (easy stuff, few lines of code). Using it properly is another.

Polygon it

That's when I discovered pr_trianglestrip. Another powerful tool. So basically any 3D model is made of triangles anyways - but I was under the impression that this is 2D engine, 3D is definitely not GM cup of tea. However, trianglestrip showed promise: if I can separate a paper into "meshes" or triangles I can make rectangles (1 rect - 2 tris). Having strips would allow me to manipulate vertices. And so I did that:

Initial paper vertices and meshing

I took a sprite, calculated width and height and made triangles by creating arrays of points (top and bottom) and then drawing content into it:

Part of the code governing paper drawing (reposted with EN comments)

And the best part is that you can use your surface as input and inject it into that polygon, draw it there like any regular sprite. So pipeline would be:

- create a surface

- draw anything into it

- create polygons

- draw surface as vertex texture

It also meant that I can change surface any time I want and then redraw the whole thing. That covers one part of the problem (being up to date with the surface changes). Second part was more difficult: behavior. So to allow picking paper up and dragging it around (and even flip it).

To do that I've created fold data as a collection of arrays and literally initiated following of the mouse cursor. That's a simple movement but bending proved to be quite difficult:

That's a nope

Sine function for the bottom vertices

Since I am not a top-notch programmer and generally don't like math that much, let alone trigonometry, I've used Tech Art skills: make it visual, affect a potion and then transfer that to the rest. That's why you can see red dots and text on that surface, I had to debug draw them in order to see what happens when I do certain action.

That's where I started sending info from the object itself (I've created FSM to handle behaviors, when paper is stable, when we are picking it up, dropping) when paper should follow the mouse cursor and moving vertices per index. Hence why they have iNumber on them. For each one of them I've used mouse delta + small delay/offset which decreased with the index number (so that the left side is harder than the right one.

Needless to say there were some funny results in the process:

That's one elongated piece of paper

When there is no limit to deformation - this happens

When there is a limit with a very hard parameter - this happens

In the end I've managed to make that movement more or less very smooth. Flipping operation was not that hard after this, simply giving "orders" of the edge index points to move to the opposite side, keeping targets in separate arrays. I've used the same principle for other objects too:

Initial War Diary book design

Conclusion

A pipeline of surface creation - polygon creation - vertex rendering - vertex deforming did the trick. You get a false sense of 3D paper object whereas that's really a polygon/surface one. There are few things to keep an eye out if you try this at your place:

be careful performance wise: make sure that you clear and free the surface when you are not using it (paper out of screen, flipped, nothing expected to change in some time).
to prevent issues I've split surface creation into one object and surface handling into another one. I suggest you do the same as it makes it easier to pinpoint the issues and to reuse logic later on.
visualize: debug drawing is the key. Draw red, green, blue dots, names of the vertices, that way you can visually confirm how it works, where certain points go etc.
pull formula for deformation or movement to a separate class: Step event became huge so I had to eventually abstract part of it and put it into separate scripts. In the end I have dozens which are now cross-utilized with other objects too.
for debug purposes have a set of keys that allow deformation (in my case it was F9 to turn debug and then arrows up and down to move the vertices and numbers 0 to 9 to select indexes)

Thank you all and hope that this helps. It was a revelation for me as I couldn't find other optimal way to achieve what I was aiming at.

reddit.com

u/AleksejFonGrozni — 8 days ago