[Example] Custom Transition #1

[joannesalfa]

I'm working a topic about custom transition tutorial using sprites or tiled background.

It's not perfect like Cave Story transition because it's different which is used by pixel shader from DirectX.

There a transition sprite sheet i made:

I placed a group of sprites over the screen, the reason is why there no animated tile background plugin.



There an example of custom transition:

http://flamma-alfa.net/html5game/Transition%201


Controls:

Left and Right Arrows - Walk

Up Arrow - Open a Door

Shift Key - Jump




Source code (.capx):

IMPROVED VERSION - Thanks to onezephyr
Transition 2.0

 

[So fist]

Hey this is a cool start. There seems to be either some kind of tiling problem with all the animations, or the program is just not simultaneously executing each row of animations.

You may want to add a blow by blow walkthrough of how you made this work for people really green with the program. Like have a capx with all the graphics but none of the events. And set it up so people can follow directions to make the product. I always learn so much from the tutorials set up like that. I know this is a simple thing to execute, but the more people can practice making the program do different things the more they will learn how to use the event system in general.

 

[onzephyr]

I like the idea you have going.
Decided to downloaded the .capx and checked out the events. And wondered if it could be tweaked so the user didn't have to set up all the sprites on the layout. Or worry about events for each door. This allows for the reuse of the same event sheet. Played with the events a bit and come up with this. Same effect overall, commented it a bit. Player controls were reset to default just so the only events left have to do with transitions.

Live demo.
Left & Right Arrows to move
UP arrow to jump,
UP Arrow to activate door while overlapping


Download .CAPX

 

[joannesalfa]

I like the idea you have going.
Decided to downloaded the .capx and checked out the events. And wondered if it could be tweaked so the user didn't have to set up all the sprites on the layout. Or worry about events for each door. This allows for the reuse of the same event sheet. Played with the events a bit and come up with this. Same effect overall, commented it a bit. Player controls were reset to default just so the only events left have to do with transitions.

Live demo.
Left & Right Arrows to move
UP arrow to jump,
UP Arrow to activate door while overlapping


Download .CAPX

Well done! i forgot to use loop which is based from "repeat" in construct classic, your .capx is improved to my old .capx, actually there some visual flaws after of Transition if you notice there some white space squares in random position, let me see i can get rid of a glitch to get perfect visual.

 

[onzephyr]

Not sure if I've seen the "white space squares in random position." I must of missed something. Is it reproducible? Or does it seem to happen only so often. It's the random part that makes me wonder.

Also I noticed after I posted. That I need to put and additional condition on the "ovelapping door/keypress up arrow" event to trigger once . because if a person is really fast they can trigger the event more then once. It still functions fine. and it's not even noticeable except for the object count jumps up more then it should. it's all cleared up on layout change. Still I could of done it better.

 

[joannesalfa]

It seems to happen only so often if you keep repeating open the door, this works very well but it may be visual flaw for some gamers can't appreciate it, but it was very minor problem.

There a pic what im talking about

i couldn't make a perfect screenshot because it went very faster like 0.5 seconds before to take screenshot

 

[onzephyr]

Weird. I can't seem to reproduce it. What browser and version are you using?
it kind of looks like a redraw is happening before the the loop ends . or some of the sprites are on the wrong frame for a tick. but I'm not sure how.

EDIT: I had an idea about changing how the sprites are disposed of . try this version and let me know if you can still get the problem to happen.
Transition_mod_V2.capx

 

[joannesalfa]

Weird. I can't seem to reproduce it. What browser and version are you using?
it kind of looks like a redraw is happening before the the loop ends . or some of the sprites are on the wrong frame for a tick. but I'm not sure how.

EDIT: I had an idea about changing how the sprites are disposed of . try this version and let me know if you can still get the problem to happen.
Transition_mod_V2.capx

Flawless! there no visual problem now... i tried to open like 10 times, there no visual flaw... it was perfect like charm.

I used Chrome browser, i would to edit my main post and replace this .capx to your improved version because it's perfect.

 

[joannesalfa]

I doubt there they will have better transitions using WebGL, i hope when they release new version of construct 2 comes effect shaders

 

[onzephyr]

Shaders will be very cool, Ashley said they are on the list and at least one person has already posted a demo of it working in a plugin.

Now that the weird effect is gone. There is some general cleaning up of the capx we could do to make it easier for others to use, and learn from.

Could do an explanation step by step, like So Fist said.

 

[joannesalfa]

Shaders will be very cool, Ashley said they are on the list and at least one person has already posted a demo of it working in a plugin.

Now that the weird effect is gone. There is some general cleaning up of the capx we could do to make it easier for others to use, and learn from.

Could do an explanation step by step, like So Fist said.

Indeed, doing an explanation step by step would to cost my time, but i will do for next time.