Morgana retro Dungeon Crawler (uses Tilengine)

[JaumeAlcazo]

Thanks megamarc.

After all I ended drawing the hand compass animation frame by frame on top of the compass drawn by the artist and flipping the animation X, Y and X-Y and I only needed two animations: north-west and west-south (and the flips). And it's looking very cool, but I still wan't to unveil it until video2 cames out, or at least the next promo screenshot.

We will post another promo screenshot soon, hopefuly, and it will feature the compass.

Meanwhile I was suggested and asked by a friend to add graphical corruption glitches as sanity drops and it's a very nice idea. I stumbled upon this great tutorial:



So I asked myself how this could be achieved with Tilengine and would like to ask you for more ideas on how to achieve it.

You know my current aproach is using Sprite's everywhere to build the scene, except for a few static backgrounds. So distorting it in the way the tutorial suggest would be difficult at Tilengine's level, I mean, at Sprite level, as for instance there's no current way to slice the sprite in horizontal strips as the "Horizontal displacement" suggests.

Then you think: well, then do an animation, as it is done in the tutorial, you just draw several frames of the same sprite and apply the distortions and treat it like an animation.

Yes, but remember my viewport is made of several sprites, and so is the GUI made. So it would be impossible to hand drawn all the animations in all the possible sprites and trigger them at the same time, I think that is a dead way that leads nowhere.

Then it comes to my mind the Layer struct and all the raster effects you applied using the layers. So maybe one idea is to port the entire game to layers, altough I'm not sure if I'm able to do that or how to exactly do that, and then apply the effect to several layers at the same time.

It seems that the tutorial is asking for Tilengine's Layers, but it seems very difficult if not impossible to port the whole game to Layers instead of Sprites at this point, and maybe that's not possible even if I try it.

Another option would be, as we talked some time ago, to take a screenshot (by code) then reading it back from the hard drive, applying the distortion, feature it on screen for some miliseconds and then move it to 2000,2000 (as I usually do to hide sprites).

But maybe that's expensive, altough remember my text system creates images from ttf on the fly and reads back from hard drive in no time, so maybe it's feasible.

Then another option came to my mind, to work at SDL level and somehow get the pixels of the frame before the frame is rendered, and distort them, just before the frame is rendered, just inside this in the main loop:

Code:

TLN_DrawFrame(frame);

I searched your code and found:

Code:

void TLN_DrawFrame (int time){
     TLN_BeginWindowFrame (time);
     while (TLN_DrawNextScanline ()){}
     TLN_EndWindowFrame ();
}

So, maybe I can do custom TLN_DrawFrame2(frame) and then mess around with the pixels inside TLN_DrawNextScanline(void) before 

Code:

/* next scanline */
engine->line++;
return engine->line < engine->framebuffer.height;
}

Any hints on this approach megamarc? It is feasible? Or better I seek another way?

[megamarc]

What an extended post you did! Very detailed, that's good.

Actually the horizontal (and also vertical) distortion effect that you try to apply to sprites is very easy in Tilengine: use raster effects! Not only the background layers can use them, but also sprites. You should have a high priority layer that frames the UI, so that you don't see the lines coming out from the sides when you apply it to the sprites underneath that you want to distort. It should work without problems. If I remember correctly you already have it mounted like this, right?

Let us know if you manage to make it work or need some example.

[JaumeAlcazo]

I didn't know you can apply raster effects to Sprites as well to Layers!

The framing setup you talk about it's already done, yes. But that doesn't concern me as I would apply the corruption effect to the whole screen (so to the Sprites forming the GUI as well).

Yes please, I would like a simple example on how to apply a raster effect to a single Sprite and I think I can go from there.

To be clear, to see if we are understanding each other: we are not talking of scaling, flipping, palette changing or cycling, animating frame by frame or blending. I already know how to do that. I would be very interested seeing how to apply a raster effect to a single Sprite.

To be honest, I don't clearly understand what is a raster effect as I couldn't find a proper definition online. I think it's moving around the pixels at scanline level (theoretically with the hardware of a console, I guess) so the "Horizontal Displacement" of the tutorial should be feasible.

I liked very much the Wobble effect of Wobble.c for the teleporters in the game and tried to apply Wobble to my Sprites months ago but I couldn't do it as I thought it only can be done with Layers so I layed that idea down for the moment. But what you say it's encouraging now. Seeing the Wobble effect when entering a teleport should make a great impression in a video for the players/potential kickstarter backers and it's a very desirable feature for me.

Going back to glitches effects, making square selections and moving around as suggests the "Corruption" part of the tutorial looks harder, but if I know how to manipulate scanlines or single pixels of a Sprite maybe I could achieve that.

I would be plenty satisfied if I manage to apply the Wobble effect to a single sprite (then I would extend to the other sprites forming the viewport) or the scanline displacement of "Horizontal displacement" part of the tutorial.

Thanks for your answer, time and patience. Best regards.

[megamarc]

Hi Jaume!

I am glad to help you with your project to which you are dedicating effort.

A raster effect consists of any visual effect achieved by modifying the rendering parameters of any element (layer or sprite) in the middle of a screen refresh. In the current graphic systems, the entire scene is first painted in an off-screen buffer (framebuffer), and then the result is presented at once. But in 2D consoles / arcades it is not like that. There is no framebuffer, the image is built line by line in real time, synchronized with the monitor retrace. There is a precise synchronization between the CPU and the retrace, with which it is possible to make adjustments in the image generation at the scanline level. This feature is what emulates tilengine. It not only allows you to change the position, but any setting: palette, scaling, etc. For example, Super Nintendo simulated 3D projection by altering the scaling factor in each scanline in mode 7. Mode 7 alone only allowed to rotate and scale a single layer, the famous 3D effect was achieved with raster effects. The "Mode 7" example of tilengine does exactly that. Another very common effect was to simulate the color of water in scenarios that were partially submerged (such as the Sonic). There are many creative applications.

You can achieve glitch effects, horizontal distortion or vertical synchronization errors playing with the x,y values of the element to be distorted, within a horizontal retrace callback. You have the flexibility to apply it only to the elements you want.

If what you want is to distort the entire screen equally, then that would better be a post-processing effect such as CRT, which is outside the scope of what tilengine pursues. In that case it would be better to implement it as a shader in the GPU at the end of everything.

The "wobble" effect as such can only be done with a tile layer, since it uses a feature called "column offset" that allows you to shift the vertical position of each column of tiles. Only tilemaps have column notion, bitmap layers and sprites do not. But the horizontal distortion part of the effect can be applied to any element.

When I have time I will prepare a small example

[JaumeAlcazo]

Hi everyone! New promotional screenshot!

This time I didn't forget to specify it is being programmed with C and Tilengine in the post on the Facebook page 



Facebook page of the project: https://www.facebook.com/morganadungeoncrawler/?

How are you doing in this difficult times? Having to work remotely and being confined with a 4 year old daughter and wife isn't the best environment to program

Megamarc, please, when you can give me that example on raster effects applied on sprites instead of layers.

Best regards.

[megamarc]

Hi Jaume,
Nice to know your game is progressing, and thanks to credit the tools used in your Facebook promotion page!
I'm also working from home, some days with my 6-year old boy "helping me", some days alone. We're all healthy, so I can't complain. I hope you're doing well too..

This is a sample glitch on a sprite. It combines two different glitches: a per-line bad hsync, and a per-frame bad vsync. They're configurable in the top macros. AMOUNT_ is the chance to happen, in units of 1000 (1000 = 100% chance), and STRENGTH_ is the displacement in pixels. make_glitch_map() builds a glitch table that is then used inside raster() function to "glitch" a single sprite. You could tweak it to glitch a list of sprites, or even background layers. Having a shared table makes it easy.

Regards,

[JaumeAlcazo]

Thank you very much Sorry for the delay! I'll try that and let you know how it looks in-game

[megamarc]

Hi, how you're doing? Have you tried to integrate the effect inside your game?

[JaumeAlcazo]

Thanks megamarc, sorry for the delay '

Taking a break for some days, as work and daughter 24/7, lockdown, stress, and daily life is hard to balance.

But it looks very good, thanks, it's what I expected. I will try it ingame and post the results.

[megamarc]

No problem, it can be hard in this unusual situation. I hope you can continue work on it soon.

I'm releasing more frequent updates these days, introducing many new features, and advancing in documentation, that's the big missing part.