MV Parallax Mapping for Beginners (3 Part Video Series)

Discussion in 'RPG Maker MV Tutorials' started by fallenlorelei, Nov 3, 2015.

  1. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    336
    First Language:
    English
    Parallax Mapping for Beginners

    I just finished my first tutorial, a 3-part video series on how to parallax map for RPG Maker MV! If you have any tips for me for future tutorials, let me know =D Thanks!

    You Will Learn How To...
    create a unique forest/mountainside map using only the default MV RTP!
    • Resize & recolor tiles
    • Clump items together for an original look
    • Maintain your animated river and waterfalls
    You Will Need...

    Part 1
    Here you will build the basic skeleton of the map in the MV editor and then bring it over to Photoshop.

    * Update for Part 1! There is now a MapShot plugin you can use instead of Print Screen. Yay! Get it here.

    Part 2
    Here you will add all of the details to your map in Photoshop. It's a bit long - feel free to stop watching once you get the idea =)

    Part 3
    In the final part of the series, we will save the bottom and overlay layers of our map, then bring it over to RPG Maker.

    Part 3.5
    This is an updated technique video I made to make Part 3 a little more efficient and easy =]

    Interior Mapping
    I made an Item Shop video so instead of making a new thread for it, I thought I'd add it here! It goes a little bit faster than my previous tutorials, so if you have no idea what you're doing, maybe start with those first =]

    Extra Tips
    Because this is a tutorial aimed at beginners, I tried being simple and straightforward. However, there are lots of other ways we can change my method. Here is a list of tips from both myself and what I've read from my viewers:
    • If you can't fit your whole map in a print screen, you'll need to make multiple screenshots and be careful to align them together correctly
    • For images without a transparent background, save them as a jpeg instead of png, to reduce the file size
    • When saving your overlay, go to "Save for Web" instead, which will also give you a smaller file size
    • Instead of creating the skeleton of the map in the MV editor, you can use this Tiled Map Editor which will output your map with layers still intact for extra editing power (You can also add the floors and walls into Photoshop directly but that can be considered an "intermediate" level as opposed to beginner)
    • Another overlay plugin to use is Kaus UItimate Overlay
    • GIMP is apparently a really awesome program for beginners! Give it a try =D
    • Another way of animating the water is to actually make a copy of the water tileset then edit out the grass, so its just the water. It's easier because its reusable =D
     
    Last edited by a moderator: Feb 26, 2017
    #1
    Kaelan, about7, MaGicBush and 46 others like this.
  2. InBlast

    InBlast The Mad Hamster Veteran

    Messages:
    288
    Likes Received:
    88
    Location:
    France
    First Language:
    French
    Thanks. Thanks again, and another thanks.

    Before watching this, i didn't even know that it was possible to do this ^^

    But i have one question : If i have a map which is bigger than my screen (i mean, i can't take a screen of the whole thing), how can i do this ? 
     
    #2
    youkochaos likes this.
  3. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    336
    First Language:
    English
    I'm glad you liked it! :D

    To get that map into Photoshop, you'll do the same method I did, but with multiple screenshots, and then make sure to align them up correctly. It's a little more work!
     
    #3
  4. InBlast

    InBlast The Mad Hamster Veteran

    Messages:
    288
    Likes Received:
    88
    Location:
    France
    First Language:
    French
    OK thanks i will try it !
     
    #4
  5. Kaazman

    Kaazman Villager Member

    Messages:
    14
    Likes Received:
    11
    Location:
    Monterey, CA
    First Language:
    English
    Wonderful tutorial. Excellent for beginners because it's grounded in the RTP. 
    For those looking to get even more advanced, I'd point you to Kaus's Overlay Mapping Plugin.
     
    #5
  6. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    336
    First Language:
    English
    I'm glad you liked it :D I went ahead and added that plugin link to an Extra Tips section
     
    #6
  7. Galvanar

    Galvanar Warper Member

    Messages:
    4
    Likes Received:
    0
    First Language:
    German
    Thank you very much sir!

    Regards Galvanar
     
    #7
  8. Ashouse

    Ashouse Resident Zombie Veteran

    Messages:
    245
    Likes Received:
    91
    First Language:
    English
    Primarily Uses:
    N/A
    Im not new to photoshop, but I didnt even THINK to use pattern stamp tool! I have been inspired. My dirt ang grass overlays never looked right. Now im so excited. Cant wait to get on the pc and DO THIS! Thank you!
     
    #8
  9. Ashouse

    Ashouse Resident Zombie Veteran

    Messages:
    245
    Likes Received:
    91
    First Language:
    English
    Primarily Uses:
    N/A
    You have just made me a dangerous man. By default you can lock a parallax to the map by naming the image with an !. Ie: "!bigmap01". Will it mess it up to do this as a base layer (only adding 1 show picture event for the overlay)?
     
    Last edited by a moderator: Nov 6, 2015
    #9
  10. Parallax Panda

    Parallax Panda Got into VxAce ~2014 and never stopped... Veteran

    Messages:
    715
    Likes Received:
    1,041
    Location:
    Fukuoka, Japan
    First Language:
    Swedish
    Primarily Uses:
    RMMV
    Fantastic tutorial! There is so many different ways to do parallax maps that it is always interesting to study other peoples work flow and see how they do it.

    In didn't know/think about the pattern stamp technique in photoshop. Have to look into the possibilities of doing that in GIMP. Thanks for the tip! :)
     
    #10
  11. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    336
    First Language:
    English
    You're very welcome ma'am! ;)

    Hahaha. You're welcome!

    The ! is for the program's built in parallax, true. I try to avoid that way because for whatever reason my pictures turn out blurry when in-game (if you look at my first video, you'll notice in my "test map" how it's really blurry and messes up the overlay plugin, because I used the built-in parallax background). The same ! is true for the overlay if you use Foreground.js (also makes my maps blurry...). But, for bindpicturestomap, there's no need =]

    There are so many parallax tutorials on YouTube that I wondered if I should even bother, but then realized I do my way just a bit differently =] so why not put mine in there too! And I actually think it was a GIMP tutorial from years and years ago that inspired me to find a "Pattern"-like tool for Photoshop. So it's definitely possible!!
     
    #11
    Parallax Panda likes this.
  12. Arcmagik

    Arcmagik Game Developer Veteran

    Messages:
    496
    Likes Received:
    641
    Location:
    VA
    First Language:
    English
    Primarily Uses:
    RMMV
    This was a fantastic tutorial. I was trying to figure out how to make the leap but everything else seemed crazy complex. Not only did I watch this video I forwarded the link to my friend who had just started to map. I can't wait to really sit down with Parallax Mapping now. Thank you!
     
    #12
  13. Chickenlump

    Chickenlump Veteran Veteran

    Messages:
    40
    Likes Received:
    21
    First Language:
    English
    It was a nice tutorial. My favorite parts were when you started explaining why you liked or did things a certain way (not necisarrily how to do them). You would go off on tiny little tangents and little giggles. It was fun.

    Long tutorials don't bother me at all. In fact, when you cut out 10 minutes or so of detail mapping, I got a little sad. You cut it out for the very same reason I was enjoying your tutorial.  I made this face ->   :/

    Why you do something is as important as how, and personal preference and the thought process behind them I find very important to be included in a tutorial. Even if my tastes differ. 

    It was nice, I hope to see more tutorials, or even just videos that have you mapping and gabbing.

    -edit- 

    That was fun, adding little details. Never would have thought to use the pattern stamp tool. 

    It's amazing how many tools Photoshop has that I never bothered to use.

    Capture.JPG
     
    Last edited by a moderator: Nov 7, 2015
    #13
  14. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    336
    First Language:
    English
    Omgosh! I never thought of using a flower pattern in a tree! @_@

    The student becomes the master......

    Anyway, thank you!! It was actually really relaxing speaking aloud my thoughts while mapping. If you want to know a secret, I cut out those 10 minutes because a friend of mine walked into my office and the door squeaked like crazy and I seriously let out a huge scream XDD and didn't know how to recover... So I decided to delete that part, and actually didn't realize I cut off making the details around the house ;__; N00b mistakes!

    Maybe I'll do some livestreams while I'm mapping some time ^^
     
    #14
    Chickenlump likes this.
  15. Ceuwbra

    Ceuwbra Villager Member

    Messages:
    11
    Likes Received:
    4
    First Language:
    Dutch
    I just noticed I was doing way too much work then needed while parallax mapping T.T. Thanks a lot for the tutorial! It really helped a lot! :D
     
    Last edited by a moderator: Nov 7, 2015
    #15
  16. danielvutran

    danielvutran Villager Member

    Messages:
    19
    Likes Received:
    6
    First Language:
    English! xD
    Awesome tutorial!!!! Definitely helpful for noobs like me! lol xdfg
     
    #16
  17. Wijen

    Wijen Villager Member

    Messages:
    17
    Likes Received:
    4
    First Language:
    Indonesian
    really great tutorial for those newbs like me !  :D

    insta subscribe  B)   

    please continue make another amazing tutorial  :)
     
    #17
  18. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    336
    First Language:
    English
    Hahaha well, this was just a simple / beginner's way! There are tons of different techniques out there. But thanks!!

    You're welcome!! =D I'm glad it helped you!

    Aw haha thank you so much! I'm gonna try!
     
    #18
  19. InBlast

    InBlast The Mad Hamster Veteran

    Messages:
    288
    Likes Received:
    88
    Location:
    France
    First Language:
    French
    I have a problem.
     
    the transparent parts of my overlay aren't transparrents when i save the image. So, with the event to show the bottom and the top of the map, i have this :
     

    [​IMG]
    How can i tell photoshop to keep the transparents parts ?
     
    #19
  20. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    336
    First Language:
    English
    Saving it as a .png will tell Photoshop keep the transparent parts.

    Before saving - when you hide all of the layers underneath this "overlay" layer, do you have a white background? It should be transparent (white and gray checkermark).

    Those are the only things I can think of~
     
    #20

Share This Page