Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / How to create this mosaic transition effect?

Author
Message
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 7th May 2013 14:52
The transition effect you see in super mario world when mario enters a door or new map, as seen in the first few seconds of this youtube clip:
https://www.youtube.com/watch?v=Lk4L_wnLe04


Any suggestions on how to go about this?

"You're all wrong. You're all idiots." ~Fluffy Rabbit
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 7th May 2013 15:52 Edited at: 7th May 2013 15:55
Well, maybe it's something you could pre-capture .

Like take a screen grab of the start of the level, and use memblocks to artificially pixelate it over a few sprites. Then fade between the sprites until the least pixelated version has faded out completely.

So, if your screen is 256x256 - you'd grab that and resize it to 128x128, and a version at 64, 32, 16, and 8. You wouldn't have to actually scale this stuff, just modify it with a memblock, which is probably faster if you were to double the 'virtual' pixel size on the same memblock and just convert it to separate images. You could use subimages and be all clever with scaled sprites... but I don't think you need to go to those lengths. You'd start with the 8pix one, stretch it over the whole screen, fade it into the 16, then fade the 16 into the 32, and 64 and 128, and there's no real point in pixelating more than that.

Memblocks might be fast enough to do it live - I've actually noticed that writing to a memblock is much like DBPro - pretty fast, it's just updating the memblock image that takes the time. You could certainly pre-render this stuff as well, if it's a concern.

I think that would give a very similar effect - maybe you'd have to make it fast, so people don't have enough time to figure it out - and hopefully they just assume it's the same effect as in Mario.

I got a fever, and the only prescription, is more memes.
kamac
13
Years of Service
User Offline
Joined: 30th Nov 2010
Location: Poland
Posted: 7th May 2013 18:35 Edited at: 7th May 2013 18:44
1. Take a screenshot of your scene that you'd like to pixelize ( GetImage )

2. Draw sprite with that screenshot as it's image over the scene (depth smaller than that scene, so it's drawn infront if it)

3. Apply this fragment shader to it:

// VERTEX


// FRAGMENT


For rt_w you may give image width, and for rt_h you may give image height. Then for pixel_w and pixel_h you'd give 2.0,2.0 to "divide number of pixels" by two. (I believe it works that way)

Shader example taken from here

Hope it works for you, I haven't tested it, but it should be fine.

PS. You'll have to find a workaround for no support ( I think there is still no support ) for sprite shaders. Just create a textured plane, then.

Follow me on twitter! @MotionStruct
Motion Struct blog
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 7th May 2013 19:12
Or you could;
1 grab a single image of the screen
2 turn it into a sprite
3 reduce the size of the sprite by half (maybe)
4 grab a new image of the sprite at it's new size
5 repeat 3&4 a few times
6 setImageMagFilter to zero for all images
7 set the sprite image to the first image grabbed
8 stretch it to fit the screen
9 loop through the other images grabbed at lower resolutions

Basically what VanB said but without resorting to memblocks.

The first grab might be a little slow but successive grabs will be pretty fast... I'm guessing on a retro style game the lag will be un-noticeable.


this.mess = abs(sin(times#))

Login to post a reply

Server time is: 2024-05-04 05:00:27
Your offset time is: 2024-05-04 05:00:27