Shop System With Events

じ☆ve冰风

Hey, it's Hex again. I decided to go back and do some tutorials, since my shop screen in my game ended up being liked by a lot of people. For those of you who have never seen what it looks like, here it is.

Please note: the inventory screen is not part of the tutorial. That was part of the Monogatari menu script.

So, how do we make this scene, you ask? It's a little complicated, but I'll walk you through it. This is intermediate eventing, so if you're a noob, go back and take some basic eventing tutorials, then come here.

A bit of a disclaimer, however. This system is meant for games with fewer items per shop. My version has 3 items, but I will teach you how to do up to 6 items. You can do more than that, but it will probably start to get dizzying after a bit.

Anyway, now that we've taken care of that stuff, it's time to get down to business.

You will need:
Moderate-advanced eventing knowledge.
Several pictures.
Two shopkeeper graphics: The icon and the portrait (If you're going for the same look as the one above).
Some sort of graphics program.

Step 1: Picking a Theme
When you make a shop, it's important to focus on something you want them to sell, unless they're an all-purpose shop. Here are some ideas.
- potions (like mine)
- weapons (blacksmith)
- clothing/armour (that'd be a tailor shop)
- all purpose
- pets
- random stuff (similar to Beedle -- I think that's how you spell it -- in Zelda)

Step 2: Graphics
First, you'll need to make your graphics for the shop layout. You should make it as close to your game's general theme and colour as possible. You'll need at least 3 of these, one for each position on the item. For example:
Spoiler: shop screen graphics

[/quote]
Now, you'll notice the shopkeeper has little explanations of the items. You can take those right out of the database if you wish.
Next, you'll need a background. It should be simple, nothing too extreme. For mine, I just used a bunch of filters in Photoshop and got pretty much the look I wanted.
The background should have nothing moving on it, unless you want it to be animated, but that's for another tutorial.
Here's an example.
Spoiler: background[quote]

Technically speaking, you can even combine that graphic with the actual menu to make things easier, but I kept them separate because the background was an afterthought.
You can decide if you want to do the "special" screen that I did. If you do, it's basically the same thing, except you only need two images. And you need to decide on the type of item you're selling. It should have some sort of sale. So for example, mine is two Schillings when the rest were 4.

Step 3: Actually Making the Event
OK. So this is the longest step, since this is where we get right down to business. First, we're going to make the shopkeeper graphic (in my game, it's just a silhouette along with every other NPC). We'll put his/her sprite behind the counter in the shop. All of the events are going to be controlled through them. First things first, we're going to do their little intro.

We want it to activate once you press something to talk to them, so it's on action button. Then you want a self switch to go to the next page. I think that's pretty self-explanatory.
If you don't want to make the "special" screen, skip this next part.
Spoiler: special

Alright. So this is a little more complicated. The first two event commands basically show the picture of the special, and the corresponding background picture. Make sure the picture ID (the "number") is lower on the background so that it is sent to the back, otherwise, it would be on top of the other graphic, which we don't want. The conditional branch is checking to see if you have enough money. You'll notice it's checking for 20 gold, even though it says 2 Schillings. That is because the default currency is Pence. 10 Pence = 1 Schilling. It'll probably be easier for you, since you probably have only one type of currency. So, next, it check for button input. If you press the confirm button (C), you buy the item, but if you press B, you decline it. Make sure to subtract the amount of gold the item costs. Then you set whatever you want to happen if the player declines, and there you go. Then you turn on another self switch to activate the next event page.

Now is the main screen.
Spoiler: Main screen

So the first picture call is basically showing the background again. (I have a different background set for the main screen)
The variables are basically what control which picture is going to be shown. SO if you press the Right button, the variable increases, and the cursor moves right. If you press Left, the variable decreases. But, it needs to stop at a certain point or else there will be no picture on the screen, because the value will go over the amount you have pictures for. So, take the amount of different pictures you have for the menu, and subtract 1. That will be when the variable needs to stop. So that's why it will only add to the variable when it's less than that number. Why subtract 1? Well, because the engine always starts a variable at 0, so every number, including 0, will have a picture.
You may be asking, "Hex, what's with the script calls? Why not just do the default button command?" Well, that's because if you do the "If button is being pressed" command, it will check to see if the button is being held down. Then the picture will change too quickly and it will be hard to click certain options. This script call will make it so that you have to press a button to go to the next option.
Next is calling external scenes. It's always nice to see what items you currently have, and what your stats are. So we'll set those to buttons as well, and the script calls would be like this: SceneManager.call(Scene_Item) The B button is to exit. So it will erase the pictures and go to the exit screen, which is activated by Self Switch C.
Now, we're going to set each variable value to a picture. This will show us the effect of the cursor moving. You do it for every picture that you have. And remember to start at 0, not 1 for the variable value.
Now, we need to set what happens when you actually select an option. You check each variable value again, but this time, you first check for button input. If they press OK on one of the options, then what happens. Next you need to check if they have sufficient gold. If they don't, you display a message. If they do, you take away the price of the gold from the player in exchange for the item.
This next step can also be skipped. You can do a little farewell picture at the end, as I have done. For that, you basically just show a picture (in the event page activated by Self Switch C) and then if you want to fade it in, make sure the picture's starting opacity is 0. Then move the picture to stay in the same place, but change the opacity to 255 (the maximum). That'll give you a perfect fade. Then you turn on the final self switch which sets the variable to 0, turns off every self switch and deletes the picture (to fade it out, you just move the picture and have it move to 0 opacity, then delete it).
And that will bring you back to the first page so you can go through the shop screen every time you enter the room. If I missed something, or you have any suggestions -- either for this tutorial or ideas for another one -- let me know.


本贴来自国际rpgmaker官方论坛作者:HexMozart88处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/shop-system-with-events.79849/