Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Instructions to make widescreen effect for cutscenes

Well this idea just popped into my head out of nowhere...seriously, I have no idea what made me think of this. But here's how to make a nice widescreen effect for cutscenes.

First, put this into your Graphics\Pictures folder:
http://i51.photobucket.com/albums/f389/ ... screen.png[/IMG]

Now, at the beginning of your cutscene event, do the following steps:
1. Do a "Show Picture" command, and do it just like this:
http://i51.photobucket.com/albums/f389/ ... /Step1.png[/IMG]

2. Do another "Show Picture" command after that and do it just like this:
http://i51.photobucket.com/albums/f389/ ... /Step2.png[/IMG]

3. Do a "Move Picture" command and do it like this:
http://i51.photobucket.com/albums/f389/ ... /Step3.png[/IMG]

4. Do another "Move Picture" command and do it like this:
http://i51.photobucket.com/albums/f389/ ... /Step4.png[/IMG]



Now it will look like this during your cutscene:
http://i51.photobucket.com/albums/f389/ ... Finish.png[/IMG]


One really nice thing about this is that that steps 3 and 4 make it so the black strips slowly move up from above/below the screen to their position. You could slow or speed that up by changing the frames of wait time.

I haven't tested this much at all, so some things might need to be changed. Text goes over the pictures, that's one flaw so far...but I'm not really concerned with that. In fact, it would actually look really nice and professional if you made it so text would only appear at the bottom of the screen on the black part, kind of like on Kingdom Hearts 2/Final Fantasy XII/whatever. So yeah, I just thought of this like an hour ago and only tested it a few times, so it's probably flawed.

Now, at the end of the cutscene if you want them to scroll of the screen like when they came in, do this:
1. Do a "Move Picture" command that's like this:
http://i51.photobucket.com/albums/f389/ ... dStep1.png[/IMG]

2. Do another "Move Picture" command that's like this:
http://i51.photobucket.com/albums/f389/ ... dStep2.png[/IMG]


Overall, I think this is a REALLY nice effect and actually adds more than you'd think (especially how they scroll on and off of the screen). I didn't want to share it cuz I wanted to wow everyone with it and keep it to myself at first but...lol I'll share the love :P.


Edit: Oh, and I know this probably isn't the right section for this, but I couldn't think of anywhere else to put it sooo...you can move it if it needs to be moved.


Edit again: Sooooo...no one's tried this?
 
I do this on my game as well. However I did a little bit different, I just made one big image 640 x 480, and then filled it all in black, and then used a feather effect so it fades gradually from the edges into nothing.

then I use a show picture command on it, but I like your idea of splitting it up so it "scrolls" in and out better XD

Nice tutorial!
 
It's very useful for those who don't like using scripts, but I believe there is a script around here that does exactly the same, made by Selwyn. It's still nice, and in this case, it's far more customizable, simply because you're not limited to 1 type of cutscene bars.
 
The script by Selwyn provides a much easier way of doing it. (and does it more effectively) but this will probably be good for beginners who don't feel confident with scripting yet.
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top