Build Up To Boston: Demo Changes

Hi all!

I hope you had an awesome labor day holiday. I spent my Sunday at the US Open watching some awesome tennis and getting an awesome tan. I now take regular and needless coffee breaks at the office so I can show it off.

This week I’m posting every day, building up to the Boston Festival of Indie Games! Last year the FIG had over 7,000 attendees. It’s a staggering thought that even 1/10th of those people might check out Vidar, and I can’t thank the program coordinators and curators enough for accepting my game into the showcase. So without further ado, today I want to talk about what’s changed since NYC Games Forum?

You might recall that the first time ever someone could play Vidar was at the end of July, at the NYC Games Forum playtest night. We had about 20-25 people play it, and got some awesome feedback. All of it and more has been incorporated in just the 6 weeks since.

New Art

The most immediate change has been all new art. Becca Bair‘s sumptuous tiles and sprites now dominate the game. When it comes to maps, this means that the cave feels more, well, cave-like. Rounded edges instead of square ones, organic walls, and a desaturated tint all help immerse the player even more.

Out with the old, in the with desaturated.

And of course, Becca’s also prepared new sprites. The cast of characters the player can interact with have all been replaced (as has the player sprite itself). These taller sprites have more detail and, as a result, more character. You can get to know them a little better just by looking at ’em.

Vidar is, at its core, about the people. Which means the people better be damn good to look at.

New Content

Since I was going to add these new sprites, I wanted to make sure the characters mattered. In the NYC Games Forum Demo, players could talk to Vidar’s citizens but, short of seeing some dialogue, it didn’t change the demo itself. The player was always going to try to rescue Sandor’s son. Now there are two big options – Sandor’s son is still in the game, but there is a chance the player will instead see Room 2 of the Ice Cave. Room 2 is a series of 3 puzzles, and there are a handful of quests that can spawn there. Specifically:

• If Bernadett is alive, she’ll ask the player to return a ghost’s spirit to its grave
• If Borbalo is alive and the player has Bernadett’s quest, Borbalo will ask the player to bless the grave with holy water
• If Dani is alive and Borbalo is dead, Dani will ask the player to find Borbalo’s alcohol
• If Szabina is alive, she’ll ask the player to find a clue to the Beast’s origins in the cave
• If Lilja is alive and Szabina is dead, Lilja will ask the player to dig around in the cave for buried treasure
• If Sandor is alive, he’ll ask the player to go rescue his son

As you can see, some of the quests included are mutually exclusive; this means that the two NPCs chosen to die at the beginning have immediate consequences for the demo.

Most of the quests are handed out at the inn, where Vidar’s citizens have congregated for this demo. But the workshop is also open.

The game decides where to send the player based on whether they got Sandor and/or Bernadett’s quest. If the player received only one, they’ll go to the map which has that quest. If they got both, it’s randomly chosen. As a result, I’ve rigged the demo’s random deaths a little bit – Sandor and Bernadett can’t both die in any playthrough of the demo.

Sandor’s Son

At NYC Games Forum, I got a lot of feedback about mechanics, balance, and puzzle-solving. So all of the following changes have been made to Erik’s room:

• Players will only solve either the left side or the right side of the room, as opposed to both from NYC Games Forum. The “left side” involves rotating arrows with the Stranger to guide Erik to the exit. The “right side” involves opening and closing doors with the Stranger to guide Erik to the exit. If the player is sent to this map, which side they do is also chosen at random.
• Additional options have been added to both sides. What this means is three levels of chance – a player has a chance to go to Erik’s room, a chance to play the left side, and a chance to see any one of 5 puzzle options in the left side.
• Pressing “A” to switch between Erik and the Stranger is instantaneous, instead of fading the screen out and back in again.
• When ice breaks around Erik, it no longer pauses the game. Combined with the above, players will (hopefully) no longer be frustrated that time is passing by because of things outside their control.
• The graphics for the gates in this puzzle are now clearly gates, and not spikes which suggested to players that they should not run into them.
• The tutorial has a more fulsome explanation of sliding, pressing “A” to switch characters, and using switches.
• Compass arrows have been added (described below)
• There is a cutscene if the player fails to save Erik, rather than just simply fading out the demo and concluding.

Gates which are clearly gates!

After playing this new version of the Sandor’s Son quest, I’m in love with all of these changes. And that tells me that NYC Games Forum Playtest Night did its job; I really can’t thank the playtesters enough for their incredibly valuable and candid feedback. It’s already improved the game 10 fold.

Compass Arrows

A few people at NYC Games Forum indicated that they didn’t know what the goal was in any given puzzle. Specifically, where’s the exit? Where am I trying to go? So with this version of the demo, I’ve added compass arrows. These little indicators bounce up and down where you’re supposed to go next in the puzzle, and intelligently do so based on where you’ve been.

Four exits? No longer a problem, just head north towards that arrow.

The arrows disappears after you go over it once. Presumably, by then the player will know where the exit is. While compass arrows will be turned on in the demo, they’ll be a quest reward in Vidar. Every possible item which changes your gameplay experience – from sprint shoes to extra time to the clock itself – is a quest reward, and there’s no reason to treat the arrows any differently.

Additional Changes

A few other fun things have been added. The player can interact with certain items in town for flavor text. More branching paths are explained at the end of the demo. The menu has been cleaned up to remove items not available in the demo. More puzzles have been color coded. And of course, dozens of bugs have been cleaned up.

I’ll have 4 laptops running the demo at Boston FIG from 10 am till close. The event is this Saturday, September 13 at MIT. If you’re in the Northeast, it’s not to be missed!

Finally, don’t forget to sign up for email updates about Vidar on the website. If you sign up before Saturday, you’ll be entered to win a Vidar-embroidered beanie!

Screenshot Saturday

Tileset created by Becca Bair, combined with RTP graphics.

Busy week, but I got to use Becca’s new Vidar tileset. Combined with some of the good ol’ RPG Maker standbys, it really creates a beautiful, wintry nostalgia. Which is tough to do when it’s so gorgeous outside!

One Map At A Time

Art courtesy of Becca Bair.

This is my first attempt at parallax mapping! Undoubtedly, I’ll need to fill this space with more trinkets and variation, but it’s definitely getting there. I used Reddit user PieHardLol’s super awesome tutorial and accompanying video on parallax mapping. If you’re going to attempt something like this, watch that video about a dozen times before starting.

Making Maps – Outdoors Details

The town of Vidar was made entirely with RPG Maker RTP, no fancy photoshop business. It’s possible!

 

Last week we talked about laying the foundation for an outdoors map. The principles could be applied to anything – a forest maze, a volcanic dungeon-crawler, or as the example discussed, a snowy town. But laying a proper foundation only gets us halfway there – to continue, we need some details. As with before, you can use these tools in every outdoors map you make!

1) Flesh Out the Important Parts First

Mapping is all a means to an end – if you have a gorgeous map but the player can’t reach the exit, the map is useless! Now that you’ve got a semblance of structure in your map, make sure that it does what you need it to do. Define the maze. Add your puzzle, with all of its switches and statues. Build the shop. Even if your map is just an entrance to a dungeon, now’s the time to nail down 100% that transfer event. Because the rest of the stuff is just gravy.

Add your doors, from here on out we need to build around them.

2) Vary the Floors

One nice thing about the RPG Maker RTP is that each floor has a few variants, and now it’s time to put them to use. When you’re outside, unless you have a man-made area, curved and irregular lines tend to dominate straight ones. You might’ve noticed in the picture above, we added some grass under the trees, but we can certainly go further.

 

If this were the entire map, I’d say this is a good amount of variation. As you can tell from the top post, this is but one corner; so let’s fill the whole thing up with grass!

If you’re not using the RTP, but you are relying on someone else’s tileset, make sure to look for one that has multiple floor variants, otherwise things can start to look a little samey.

 

3) Go Big to Small

When it comes to accent pieces – those rocks, flowers, trees, tools, etc. that decorate our map and make it come to life – start with the biggest pieces first. Four-tile trees are big, and can often block a path. You’ll want to know this information before you start drawing little cracks in your roads. Work your way down to individual rocks, tiny thing that the player will pass over without even noticing. A few extra notes for when you’re placing your decorative tiles:

• As you work from big to small, also go from rare to frequent. That is, have a few big items, some medium items, and a lot of small items.
• Since you’ll only have a few big items, there’s no reason to have two of them in the same 17×13 (screen size) space. When big items are duplicated, the duplication is noticeable.
• However, duplication of small items is not only necessary, it’s encouraged. Grouping small items in an area can make them seem both like they belong, and like they’re part of the ground or tileset. A lonely tile of fallen leaves looks like a stray mark (or worse, like something your player should interact with). A bunch of them under a tree look like Fall.
• There are very few things people need two of. Avoid duplicating tools, manmade objects, etc.

One statue, two lamp posts, one log pile. But then we duplicate small rocks and grass variants.

4) Level with your Level’s Levels

Last time I strongly suggested adding varied height, because it’s a great way to fill up space and add a dynamic visual feature to the map. If you’ve got some really good height, let’s mix that up even more by creating intermittent ledges. It’s simple!

• Using your ground tile, draw a 1-tile high ledge right into the middle of your wall. You can do it at any height; I like to play between 2 off the ground and 2 from the top.
• In any column where there is a ledge, add another wall tile to the top of that column.
• Add in shadows on the left of your ledge.

Ledges can do wonders to even further break up a cliffside, particularly if you’re defaulting to 2-high.

5) Shift Click

The most tedious, the most painful, and the most important step. BigEd781 has a great tutorial on how to shift click – go read it if you don’t know how! We’ll need to use this technique in a few places. The most important thing about shift clicking is to be consistent– experiment with different looks!

• Any time a path reaches a doorstep or a stairway

• Any time the ground abuts a building in a way that looks funky

• For bridges, or anything that goes under another thing

 

Cleaning up around paths, connecting them to form a straight line. Now Vidar is starting to feel like home!

6) Tinker

The last part is up to you. Look at areas in game and see how they feel. Play with them accordingly, until you’re satisfied!

7) Revisit

In a week or a month or two, you’ll come back to this map and realize you’ve learned a lot about mapping (notice how the top image for Vidar doesn’t have any inset cliffs?). After you feel comfortable with a map, put it aside for a little while and revisit it once you’ve made some progress. You’ll be surprised how much you can always improve!

Making Maps – Outdoors Foundation

When you first start with RPG Maker, you might be overwhelmed by the sheer number of resources online. Dozens of creators, hundreds of tilesets, thousands of options – but none of them are going to make your map for you. In this post, I want to talk about making a gorgeous map using nothing but the assets RPG Maker ships with. Learning these techniques are important; once you get the fundamentals, you’ll know which tilesets you need, why, and in what combination.

This is a multipart-post. We’ll start talking about outdoor maps here; there’s plenty more to come, and of course we’ll need to make an indoor map as well!

1) Choose the basics.

     Some people turn to RPG Maker to build their 80-hour epic. Others are excited to create a world they’ve built in their minds over several years. Still others want to make a game to play rather than tell a story. While you don’t need a 300-page game design document, everyone needs to answer a few questions before they make a new map.

• What’s the environment we’re exploring? Jungle? Desert? Tundra? Volcano? Any adjectives that truly define your environment, like Shadow Jungle or Domain of the Ice Goddess?

• How big is this map? Generally you want to alternate between large and small maps – too many large maps can make a player feel overwhelmed, too many small maps and the game feels disconnected from itself.

• What do I expect the player to do in this map? Are they just getting from point A to point B? Are they solving a puzzle? Fighting a boss? Experiencing a cut scene?

     Are there more questions you can ask? Sure! Some designers might encourage you to think about what happened here 100 years ago, what kind of vegetation would grow in this climate, come up with the unique characteristics that define the map. That’s all well and good if you’re trying to impart meaningful story, but what if you just wanna blow stuff up?

     I’m a fan of starting right away and fixing problems later, otherwise you can spend decades planning your game. Answer the above three questions, and you’re good to go.

For the outside of Vidar, we settled right away on a snowy hamlet, where all of the domiciles fit on a single screen. I wanted the player to easily enter each house, and I wanted a single area where a player might experience cutscenes at the start of each day.

2) Choose the floor.

     With that information in mind, it’s time to pick out some good basic tiles. We’ll first need 2-4 floor tiles. Find tiles that look great when spread out over massive areas, and look for variations on the same theme (or try your hand at making your own!). Using a grass floor? Get a floor with darker grass than your base, and another floor tile that looks patchier. Make sure that, when interspersed with each other, they look delicious. Looking at something more in the desert family? Find your basic tile, then one where the sand is mounded up on itself. Slight variations in the autotile can make a world of difference.

I chose the following tiles for our snowy hamlet:

Some snowy ground, snowy paths, snowy water, and snowy buildings. I think I’m set.

3) Get to mapping.

      Don’t kill yourself looking for everything right away; start drawing out your layout right away. Use placeholder tiles to indicate to yourself that an item should go in a specific place. Identify your methods of ingress/egress. Some notes on layout:

• Avoid large open spaces. Remember that the player’s screen will always be 17×13 tiles wide; if there is any place the player can stand where they won’t see something interesting or engaging, that place is in an open area that is too large. Smush it. 

• Be consistent with wall height. This occasionally requires some tweaking back and forth, but be sure to keep track of wall height and stairs. Here are some examples:

• Function over form. While your forest might look like the streets of Boston, remember that NYC is infinitely easier for a newcomer to navigate. Unless you’re intentionally designing a maze, avoid too many forking paths or branches, and too many turns.

Here’s the quick layout for Vidar. I had a sense of how many houses I wanted, marked those areas off, and marked off the exit.

 

Castle to the left, tent in the center, church up top. We have the start of our town.

4) Level with your level.  

One of the most dynamic things you can do to change up your map is add terrain levels. Not only do cliffsides take up space (and fill in otherwise empty zones), going up and down cliffsides creates a sense that the player is doing something more, even though they aren’t! Look for areas where a cliffside may be appropriate, and fill in your walls.

So let’s add some easy levels:

Cliff levels are easy filler that make your map infinitely more dynamic. If the map feels flat, it’s because, well, it is flat. Add a cliff.

5) Get a border.

     Unless you want your player to be able to leave at any edge of the map (always an option, though from a player’s perspective not the most intuitive), you’ll need a border for your map. You want it to look natural – if you’re designing a walled city then by all means, a brick wall will do just fine. But if you’re playing in the desert, you’ll need to get creative. Here are some tips:

• Water and terrain changes make excellent impediments. Can you have a body of water in your map? If so, you may be able to cut off a player’s path (lava lakes count!). Can you have a cliff, or are you on a cliff? Using terrain height adjustments is a fast method to create borders.

• Look at your layout to see if you can “extend” anything to create a blockage. If a fallen tree is critical to your map, can you place it to block off a player’s exit? If there’s a house, why not have it take up the entire “back wall” of a small map?

• Use a filler border, like a tree line, to finish the job, Ideally you don’t want your entire map covered in trees, but it can be an excellent tactic to cover large areas of terrain.

• At this stage it’s ok to leave a few holes. You might be able to fill them up with rocks etc.

Let’s take a look at how we might add some borders:

Here we used trees, stumps, and graves to block certain exits. As we build our map, we want to continue to layer these so that it doesn’t feel like we’ve blocked the borders with a single stone.

6) Sleep on it.

     You’re well on your way to your map, and it’s important at this juncture to take a step back and think, maybe even overnight. Remember way back at the start when you asked what the player would do here – looking at your map, is your answer the same? Has your design inspired you to some better or different gameplay? Will you need to add an area? Has something become redundant? Take a moment to ponder and consider what you’ve got so far before moving on to Part II (coming soon!)

Friday Script – Map Image Generator

This thing is huge – and was a snap to export using Omegas7’s script!

If you want to get the most out of RPG Maker, learn Ruby. In the meantime, lots of talented scripters have done the work for you. Every Friday, The Iron Shoe features a fun script and goes into detail about how to use it. It also covers a little bit of Ruby each time so you can make even more out of the script.

Today’s script is mercifully easy to implement, and is an insanely powerful tool. Whether you’re parallax mapping, setting up map flow, or promoting your game, you’ll want high-resolution images of an entire map. A 17 x 13 screenshot just won’t cut it. So to get that, all we need is Omegas7’s Map Saver! Download, copy/paste the script into your game, and away we go!

Setting up the File

First things first, the script requires a blank canvas to drawn on. Take a look at the size of the map you’re trying to export, and multiply by 32. You can find it at the bottom right of your map:

40 x 50 gives you the grid, but remember that each square is 32 x 32 pixels. So our blank canvas will need to be 1280 x 1600 pixels.

Using any graphics program – including Paint – make a file that is the correct pixel size. Name it “Blank.png” and put into the “Graphics/System” folder of your game (note: despite the comments in the script itself, you don’t want to put it in just “System” – you’re looking for a subfolder of “Graphics”). With that, you’re ready to set up the script call

Setting up the Event

You’ll need a single event for this script, with two pages. Follow the directions in the script, or just look at the following two images and make sure yours looks the same:

Make sure the trigger is set to Autorun, and that you turn on self switch A after the script call.

 

Again, make sure this is on autorun, and this time, make sure the conditions are set to self switch A.

 

One last little bit. Make your starting position the bottom left corner of the map.

Run Your Game

Boot up your game. As soon as you start a new game, the script will take over, scanning and generating. Soon you’ll have a beautiful map file like the one at the top of this post. You can find it in your game folder. The blank image will remain, in case you’d like to use it again!

Happy mapping!

Bridges – Tutorial and Supplement

William The Unpro Pro has a video on how to make bridges, and it’s a great scriptless way to have a character go both under and over bridges, depending on levels! Check it out! As a supplement, Reddit user warboy3 had some difficulty implementing the events William described in his video. The trick he was missing – and one not specified in William’s video – is shift clicking. When RPG Maker VX Ace generates a roof tile – like the one warboy3 was using – it autotiles the roof accordingly. What this means is, if your roof tile has a ground tile to its north, then the roof’s northern edge will be a border. Putting aside bridges and events and all of that jazz, this is what happens when you make a roof:

See those dark green borders circled in red? Those are autogenerated by RPG Maker at the edge of the roof so that you don’t walk onto the roof from its side.

As awesome as the bridges are, they won’t change that fact. Which is why our hapless player was able to walk across the bridge, but only if the bridge extended past the auto-generated border. That looks dumb, as he rightfully complained, so instead, lets get rid of the border entirely! Shift rightclick on any roof tile that is surrounded by roof tiles, say…that one:

The circled tile is surrounded by roof on all sides, so RPG Maker hasn’t generated a border.

Then shift leftclick on the entrance/exit to your bridge. It’ll look like this, notice a slight change?:

Take a look at the left roof, where we might have a bridge connect.

Shift-clicking copies exactly the source tile, auto-generated borders and all. Our bridge is going to connect to the roof on the right, but see the tile where we’ll step out? We’ll probably want to keep the top border, and just eliminate the left border. Thoughts as to how to do that?

Once you’ve got the map set up, follow William the Unpro Pro’s tutorial, and you’ve got yourself a bridge, son!

We’re going all over – and under – this bridge. It’s gonna be awesome.

Incidentally, Neon Black has an awesome script to handle bridges, and it uses region tags, if you’re into that sort of thing.