iPhone App Directory
RPG Maker VX
 
Gallery Members Search Calendar Help


Welcome Guest ( Log In | Register )

Collapse

>Announcement

The 2nd Quarter Contest has arrived! Go check it out in the Community Announcements now!

> Note for Tutorial Threads

New threads (tutorials) here will go into a moderation queue. You will not see your thread appear when you create it. A moderator will decide if it will be approved or denied.

 
Reply to this topicStart new topic
> [-Graphics-] Parallax Mapping Techniques, Part 2, Doctoring Tiles, Animation, Motion Blur
Rating 5 V
C-7
post Jun 29 2009, 08:22 PM
Post #1



Group Icon


Type: Musician
Alignment: Unaligned




[-Graphics-] Parallax Mapping Techniques, Part 2
Difficulty: Moderate, Mildly Difficult


By: C7

It is assumed that you are familiar with the techniques from the first parallax tutorial of mine. It can be found here

Now there's a unique charm to tiles and they can be visually attractive. In general, though, they're limited in what they can pull off. Since they're square-based, it can be difficult to make anything curved or even angular. A solution to this would be to use a parallax, which can be completely unique at all times. It can be quite difficult to create maps from scratch, though, and many people are quite good with tiles and would like to make them a little more unique. This section of the tutorial will teach some effective ways to modify a tiled map (doctoring) to make it stand out.

Doctored Tile Maps
Sizing
Spoiler:
The first step would be to get the map into an image-editing program. The first thing to do is to make your image file. If you refer to your map in rpgmaker, you should be able to see the dimensions of your map in tiles. Multiply each of these numbers by 32 to get the pixel size of your map. For instance, an 18x21 map would be 576x672.


Getting your map into your image editor
Spoiler:
The easiest way to get it into your program that I'm aware of would be to make sure your rpgmakervx program is open to your map and the window is maximized. Be sure you're not in event view--you don't need the grid across your map. A higher desktop resolution can make this easier for you, by the way. Press alt+Print Screen (the button is at the top-right-ish part of your keyboard) to take a screenshot of the window. Now, in your image editing program, paste it either via Edit>Paste or press ctrl+v. You may need to repeat this a few times and piece it together to get the entirety of the map.

Attached File  full01.jpg ( 1.06MB ) Number of downloads: 1405


Editing the map -- removing the blockiness
Spoiler:
The first thing that I like to do at this point is eliminate some of the blockiness inherent in tiles. For this map, I decided that the houses were fine, but the blocky pathways and cliffs were unacceptable. I still wanted to keep the essence of the map--I'm not trying to hide that it was originally tiles. I'm just trying to make them look better. I used the clone stamp tool in photoshop with a blurred brush to modify the dirt path and grass borders. I distorted and skewed and just played around with the cliffs to make them look less blocky and more irregular.

Attached File  img01.jpg ( 1.03MB ) Number of downloads: 1722



Lighting and Shadowing
Spoiler:
The next important step for me is the lighting and shadowing. Each of the rooftops got just an omni light placed on them. My lighting source for this is sort of the left side of the map. I just wanted something subtle--people will notice. At this point, because I didn't do it when making the tiled map, I used the clone stamp tool (and the marquee selector tool so I could be lazy!) to remove the shadows from the autotiles. This was because I wanted to create my own shadowing.

I used the polygon lasso tool to block out where I wanted my shadows to go, filled them in with black, and applied some blurring and a little motion blur in the direction of the shadowing to make it look like it was casting across the ground. When doing this part, be sure to pay special attention to the shadows being cast on objects at different levels, etc. It is important to do lots of details on their own separate layers for flexibility later. I lowered the opacity of the shadows a bit and voila!

Next, I added some shadows from the clouds on another layer and blurred them. These should be subtle so that they're not distracting. I also added some yellow, faded lighting on another layer coming from the left side to drive home the look of the sun.

Attached File  img02.jpg ( 966.52K ) Number of downloads: 1543



The Grass (and water)
Spoiler:
The grass is the next area of attention. This part can take some real effort, but it is entirely worth it. The grass in this sample map is made up of three layers to make it have more depth. Each is made up of grass of different hues. Photoshop has a grass brush, so I used that to cover everything. Small grass is important for a lived-in area. I used layering styles to include a really subtle bevel and drop shadow on each of the layers of grass. This gives a bit of depth and helps it to not look too flat. One more subtle thing I did to make the beveling add detail instead of detract was to use the eraser tool, using the same grass brush, and breaking things up on each of the layers. And since the grass hues are mostly derived from the grass tiles in VX, it was okay if you could see through in a few spots. Lastly, I applied omni lighting effects on each of the layers (each differently) in different sections of the map to create variance. I went ahead and made some water refractions on two different layers as well.

Attached File  img03.jpg ( 1.03MB ) Number of downloads: 1593



Walking behind objects and minor edits - finishing the map!
Spoiler:

After this, I made a few detail changes. For instance, I moved the barrels beside the large building a little bit so they overlapped a little. I also made copies of the tops of the houses and cliffs to insert on the layer that will go over the player so that they will now be able to pass behind them (there's ground there and, in perspective, you should be able to pass behind these parts). I painted on some dirt and a crack here or there on the walls and maybe touched up a place or two. The map's all done!

Attached File  full02.jpg ( 968.76K ) Number of downloads: 1916


Inserting the parallax
Spoiler:
Now it should be inserted the same way you would any parallax--remember, it must be the same size as the map or it will scroll differently. Apply the second layer as a characterset as shown in the first tutorial and set your passability with invisible squares (also shown in the previous tutorial).


Final
And there you have a doctored tile map! It retains the functionality and charm of a tile map while adding the graphical flair and eye candy of a parallax map. This method ensures that your map will also line up perfectly with the player in gameplay. Enjoy!


Animated Parallaxes
Important
This is a great technique that can add tons of depth and life to your maps. This example will use the map we just created in the last portion of the tutorial. We're going to start with something simple to begin with. But to do any of this, you'll need to download modern algebra's animated parallax script, which can be found here. The directions are simple to use and contained in the script. The files I'll teach you how to make in this will be compatible with his script.

For this map, I'd like to have the grass blowing in the wind and have the specular highlights of the water moving around a little. These are surprisingly easy to accomplish. For the purposes of this demonstration, I chose to have four frames of animation that loop smoothly. This is a minimal amount of work that will make a massive difference.

Starting out
Spoiler:
The first frame of animation is done. Congratulations! Now, we need some movement. I want the wind to come from the left in this map so movement should be moving from left to right. Remember how we made the grass on three different layers? Now they can move at different rates to really sell the effect. Basically, I nudged the main layer one pixel to the right, another layer diagonally one pixel, and the other layer (which has the smallest amount of grass) two pixels to the right. I also nudged the two layers of water effects in different directions. One was nudged down, the other right. One of them was nudged two pixels, the other was nudged 3 or 4. That's plenty of movement for this one frame. Go ahead and save this file as your second frame.



Naming the files
Spoiler:
Now let's talk a moment about frame naming. You should name them in this format: mapname_1.png, mapname_2.png, mapname_3.png, etc. This is how the script is set up to read your files. When you insert the parallax, be sure to pick the first of your maps as the background because it will cycle from that number upwards. Be sure to activate the animation and find a good rate of frame change for your map and put them in the script's editable region towards the top. You may need to test a few times to find a good rate of change to make it look natural. Also remember how big your map is and be aware of any processing hit this may cause.


Continuing
Spoiler:
We need a third frame now. For the grass and water movement, I just repeated the nudging I did last time around. Its quite simple and will definitely look okay. I saved this as the third frame. Since this is a type of animation that would just go back and forth, I duplicated the second frame and named it the fourth. This way, it will go from the first to the third frame and smoothly back to the first. Insert these into your parallax folder in your game's root folder and be sure to set your map up in the animation script. That's all there is to it. Test your game to make sure it looks alright.


Notes
Spoiler:
This technique can be used to create all sorts of effects such as a moving engine room, a flowing river, or pretty much anything you want. It's also a great way to make more abstract maps as well with flowing, swirly stuff in the background or whatever you can imagine. Just remember that with any animation, movement from one frame to the next should be pretty minimal to make things move smoothly and naturally.



Motion Blur
This is a quick and easy way to make your map's animation even smoother! While moving the grass, it would be more ideal to move some of the grass half of a pixel at a time--which is no small feat. But since things are in motion, we can estimate and get it looking pretty close.

Renaming
Spoiler:
You need to make space in your filenames for the extra frame you'll be adding in. Your original frames will now be given odd numbers and your new frames will fill in the even numbers. Since we had four frames before, our new map names will be map_1.png, map_3.png, map_5.png, and map_7.png to ensure no mistakes. We'll be making frames 2, 4, 6, and 8.


Making the in-between frame
Spoiler:
This is an extremely simple method that goes a long way. The first thing you need to do is open your first frame. I recommend now saving it as map_2.png or whatever so that you don't make any mistakes. You need to have an editing program that allows for opacity changes and layering (photoshop, etc). Now open up your formerly-second (now your third) frame. Select and copy the whole thing on top of the other so that it is a second layer on top of it. Lower the opacity of this frame to 50%. Save your file as map_2.png and, if you're worried or paranoid, close out all of the frames. You now have the first three frames! Repeat this step inbetween frames 3 and 5 to make the fourth frame. Be sure to read the next part.


Saving time - Filename chart
Spoiler:
Since this animation is going back and forth the whole time, we can reuse these two frames that we just made. Since currently, frames 3 and 7 are identical, the transitions between them and frame 5 should be the same as well. This means that you should copy you second and fourth frames and rename them as your sixth and eighth frames respectively. See the diagram to make sure you did it right. Now you have the full animation with some motion blurring to smooth things out!



Adjusting framerate
Spoiler:
If you had the animation in the script changing frames every 20 frames (three times per second), we now need to make it change twice as fast to keep the same animation speed but make it smoother. As such, the frame changes need to occur every 10 frames (six time per second). Make that simple change and check your map out--test it--to make sure things look right and that this framerate increase has not screwed the performance of your game. It shouldn't, but it could with a large map at a fast speed.


Conclusion
I showed you a few ways to greatly improve the look of your maps. Be sure to download the demo and try it out! The demo is open source as well so that you can see how any of it is done and grab any necessary scripting. I hope you enjoy this and I hope, like the previous tutorial, to see people trying out some of this stuff!

The demo can be found here: Download the demo here (20MB)

This post has been edited by C-7: Sep 13 2009, 03:33 AM
Attached File(s)
Attached File  chart.png ( 49.51K ) Number of downloads: 977
 


--------------------
Go to the top of the page
 
+Quote Post
   
Etheral
post Jun 30 2009, 12:13 PM
Post #2



Group Icon






This is amazing. Only problem I see with this is that the file size of the game ends up being too large this way. But it's definitely still amazing.


--------------------
Go to the top of the page
 
+Quote Post
   
C-7
post Jul 1 2009, 12:06 PM
Post #3



Group Icon


Type: Musician
Alignment: Unaligned




QUOTE (Etheral @ Jun 30 2009, 08:13 AM) *
This is amazing. Only problem I see with this is that the file size of the game ends up being too large this way. But it's definitely still amazing.


It does increase the file size a lot, but the parallax folder in this case includes I believe 12 high-resolution parallaxes. I have the full 8-frame animation (quite large images) as well as the 4 frames necessary for the animated parallax without the motion blur. I left those 4 in for anyone who wanted to try it out and see the difference.

Thank you very much for your compliments, though!


--------------------
Go to the top of the page
 
+Quote Post
   
Yuri !!
post Jul 1 2009, 12:39 PM
Post #4



Group Icon






wooww.. this is nice very nice
i like ur style laugh.gif
Go to the top of the page
 
+Quote Post
   
Fina
post Jul 1 2009, 03:45 PM
Post #5


Getting better.
Group Icon


Type: Writer




Great tutorial and demo, but one question though.

Why doesn't your demo lag to kingdom come with a parallax map so large?

I'm using parallaxes for the insides of houses and shops to make them more diverse, but there is a tiny bit of lag on the map that didn't exist before using the parallax. In the shops I have a shopkeeper event and some NPCs walking around to talk to...but no more than 5 in a single shop.

Yet you can feel the lag.

I really wanted to create parallax maps for my first town, but decided to see how it worked in a small house at first. I noticed the lag on a small map and thought it was be impossible on a larger one, but your map is several times the size of my shops and I noticed no lag at all.
I am even using a script to help reduce lag.

I want to use more parallaxes, but it lags >_<


--------------------
Tutorial on creating "Kill Monster" and complex "Item retrieval" quests!
Tutorial on how to work on your game when not at home!
Battlers I drew (can be used with Side View Battle System)

My project information and development thread coming soon!

Toasting makes me uncomfortable. But toast I love. Never start the day without a good piece of toast. In fact,
let's toast to toast.

Go to the top of the page
 
+Quote Post
   
C-7
post Jul 1 2009, 04:13 PM
Post #6



Group Icon


Type: Musician
Alignment: Unaligned




@Fina: I'm really not sure. The more CPU-heavy stuff is, the more likely lag is in games but I have plenty of events on that map and its changing parallaxes every 9 frames I think--that's pretty quick for a full-map change. Perhaps you have a lot of scripts running in your game that are getting in the way? That demo is pretty bare-bones as far as scripts go, but a non-animated parallax map of most sizes should be pretty manageable. Did you have some parallel processes running on your test map that could've been making things chug? That's all I could guess--scripts or parallel events clogging up your cpu. Let me know if you find a solution.


--------------------
Go to the top of the page
 
+Quote Post
   
Fina
post Jul 1 2009, 04:21 PM
Post #7


Getting better.
Group Icon


Type: Writer




No parallel processes on the indoor maps.
But I do have a lot of scripts in my game. I didn't realize that having more scripts would cause this problem. I even have several scripts that I have not even used yet.
Perhaps I should go through the list of ones I have and remove some of the ones I don't really need.
Thanks.


--------------------
Tutorial on creating "Kill Monster" and complex "Item retrieval" quests!
Tutorial on how to work on your game when not at home!
Battlers I drew (can be used with Side View Battle System)

My project information and development thread coming soon!

Toasting makes me uncomfortable. But toast I love. Never start the day without a good piece of toast. In fact,
let's toast to toast.

Go to the top of the page
 
+Quote Post
   
Stef-san
post Aug 12 2009, 12:28 PM
Post #8



Group Icon






this tutorial is rly amazing smile.gif
thanks for your work on it. I will try it later on and say my opinion about it and try it one time by myself biggrin.gif


--------------------


Go to the top of the page
 
+Quote Post
   
Runefreak
post Aug 31 2009, 02:09 AM
Post #9


mr. inactive
Group Icon


Type: Designer
Alignment: True Neutral




This is very nice C-7, hope to see more from you.


--------------------

Go to the top of the page
 
+Quote Post
   
Tamar
post Sep 3 2009, 11:29 PM
Post #10


Oh, the horror.
Group Icon


Type: Writer
Alignment: Unaligned




Spectacular! I may try a hand-drawn game with this... I could even do maps in watercolors and scan them. O-O Opens up a world of possibilities.

Just one thing... on the animated maps section, where you say you'll need a particular script, "which can be found here"... I'm not seeing a link to anything ^^; Is it just me?
Go to the top of the page
 
+Quote Post
   
terry1387
post Sep 12 2009, 11:12 AM
Post #11


Don't worry i'll do it later!!
Group Icon


Type: Undisclosed




Hey, im using photoshop cs-3 and my problem is:

I do what the tut tells me to, i take the size of my map wich is 25x25
i do the 25 times 32 thing and i get the answer 800x800, so i created a new file with that size.
Here comes the problem. When i paste it into Photoshop i only get a part of the map. I suppose thats because
the maplist the tilesets and eveything is included in the screenshot too.
Not only the map... sad.gif Is there any way to quickly only take a picture of the map?

( i'm terrible at explaining )

Edit: ahh, just had to paste it into paint.net first and choose the map
with the box-ish-copy tool.

This post has been edited by terry1387: Sep 12 2009, 11:15 AM


--------------------
Thats me as a Sprite.
Spoiler:


My Projects:
Spoiler:

Darkness rising: file got corrupted

<- Dropped

Working on a new project, wich im yet to name.


I support:
Spoiler:





Wich FF character am i?
Spoiler:

Lol i have no idea who that is ( he looks like a fag (jk)


Wich color am i?
Spoiler:
Go to the top of the page
 
+Quote Post
   
C-7
post Sep 13 2009, 03:36 AM
Post #12



Group Icon


Type: Musician
Alignment: Unaligned




@Tamar: Oops! Nice catch. The link is edited now to go to here http://rmrk.net/index.php/topic,29866.0.html (off-site link). Sorry 'bout that! And I hope you do try a hand-drawn game!

@terry1387: Alternately, you could paste it into your new document and then use the move tool (the top-right one with the black arrow thing) to move the map over and line it up with your document. But glad you found a way that works for you!


Also, thanks Stef-san, Runefreak, and whoever else.


--------------------
Go to the top of the page
 
+Quote Post
   
Robocroakie
post Sep 13 2009, 10:10 AM
Post #13


Ballin!
Group Icon


Type: Writer




God, this is freaking awesome.

But, honestly, the water in the demo... ehh.

I'm trying to think of a way to fix it, like how there's two parallax layers... if underneath the 2nd layer, you redo the outer water tiles, excluding the shore, so that it has motion as well?

Just a thought.


--------------------
Go to the top of the page
 
+Quote Post
   
Gingercake
post Sep 13 2009, 03:17 PM
Post #14


I want a Mokona too....
Group Icon


Type: Designer
Alignment: Neutral Good




Downloading the demo now to check it out. Either way, from what I can see here, amazing stuff! Showing us more and more that we can do with parallaxes tongue.gif.


--------------------
My Signature
(Its like a portable profile xD)

*Gasp* I have a deviantArt now, come check it out! http://gingercake725.deviantart.com/
Yep, I'm a sucker for free pageviews :P

My SigBars
Spoiler:


---
My SigStuff
Spoiler:


Fun-fun Quiz Stuff


Haiku-styled poems
Spoiler:

Dripping ruby rain
Leaking from a crystal heart
hanging among the trees

A heart of bright gold
Corroded em'rald green
Pierced with icy lance

A light in the dark
Embraced by the coldest depths
Refused hope's last wish

Moon in the morning --
A sil'vry cresent of light
On an orange canvas

With a pen in hand
I can raise nations from dust
Or tear it to ash

Never clsoe your mind
Free your imagination
Unleash your true dreams

A single picture
A moment in time held still
Always to be seen

There, an apple sits
Dark red, the color of blood
Crying once bitten

Skies of baby blue
In the infinite beyond
Always out of reach

A plastic device
Warmed by my aching fingers
Texting to my friends

A bright ray of light
Breaking through the clouds above
Upon a trash heap

Rain falls from on high
Crashing to the ground, it drops
Music to my ears

A pink pen, why's that?
I ponder this and answer
A pink pen, why not?

To be who I am
Is to disagree with what
Others think I am

Throw rocks at the water
Watch the ripples that follow
Waves that shake the world

Sit in the corner
Set your tears free on the world
Drown away sorrow

Ice-encrusted hair
Blowing with the frozen snow
A story to tell

I know there's a lot of them, but its really only a small selection of what I've written ;P
Leave a comment on my profile here of the ones you like, or just your general thoughts about my haiku-styled poems!

My rating system for games
Spoiler:
1 - Makes-me-wanna-gouge-my-eyes-out bad
2 - My eyes bleed a bit upon viewing it, but in a bad way
3 - I *sigh* at the mundane-ness of it
4 - It was a little better than "okay"
5 - I drooled over the awesomeness that it is!

My Pandora profile and music!
Random Unpronounceable Names
Spoiler:
Yquex'suhthzik Tan'kivrurstitht
Kakh'ittizhi Jjygiut
Lvi'riyk Avbt'ytraunvti
Byayjio'kithitht Ulth'izha'evrithli

Youtube Favorites :3
Spoiler:
---
My Quotes
Spoiler:

QUOTE (BigEd)
Hold on, let me use my psychic powers to solve your problem...oh crap, it didn't work, sorry
QUOTE (BigEd -- to a beginner about what should be learned first)
Switches.

For the love of all that is holy, switches.
QUOTE (Malexos)
And just so you know, i've just adopted you as my new god. :mellow:
QUOTE (The Legend of Zelda: Ocarina of Time Commercial)
In the end, willst thou soar? Or willst thou suck?
QUOTE (Shigeru Miyamoto)
"Video-games are bad for you? That's what they said about Rock 'N' Roll."
Go to the top of the page
 
+Quote Post
   
C-7
post Sep 13 2009, 09:06 PM
Post #15



Group Icon


Type: Musician
Alignment: Unaligned




QUOTE (Robocroakie @ Sep 13 2009, 06:10 AM) *
God, this is freaking awesome.

But, honestly, the water in the demo... ehh.

I'm trying to think of a way to fix it, like how there's two parallax layers... if underneath the 2nd layer, you redo the outer water tiles, excluding the shore, so that it has motion as well?

Just a thought.


Mr. Anonymous has written a script for me to use water tiles beneath the parallax to fix that issue. Even better, though, in my own game I just made all of the water from scratch and it looks really nice.


EDIT - for robo, here's a shot (sort of) of it.


This post has been edited by C-7: Sep 13 2009, 09:45 PM


--------------------
Go to the top of the page
 
+Quote Post
   
Robocroakie
post Sep 13 2009, 09:22 PM
Post #16


Ballin!
Group Icon


Type: Writer




Oh, awesome. Wanna show us a screenshot?


--------------------
Go to the top of the page
 
+Quote Post
   
chibigoten23
post Jan 11 2011, 08:12 PM
Post #17



Group Icon


Type: Undisclosed
Alignment: Chaotic Evil




Thanks, this helps a lot, great tutorial, and first part too.
Keep up the good work.


--------------------
I Support:





Go to the top of the page
 
+Quote Post
   
HanzouMasta
post Apr 9 2011, 09:54 AM
Post #18


Unit Type: ARMStrong
Group Icon


Type: Designer
Alignment: True Neutral




Umm... what's the idea of making the water "cloudy"...? O_o
Great tutorial by the way... It's really something worth learning.
Go to the top of the page
 
+Quote Post
   
kamekh
post Jun 24 2011, 05:11 PM
Post #19



Group Icon


Type: Writer
Alignment: Lawful Good




Fantastic tutorial. Maps can now contain pretty much whatever you would want. Thanks so much for this. laugh.gif
Go to the top of the page
 
+Quote Post
   

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Lo-Fi Version Time is now: 18th April 2014 - 02:37 AM

RPGMakerVX.net is an Privacy Policy, Legal.