If you refer back to one of the first Mario games, and look at one level, it could take you between one and three days to design something that works as well as that IF you can program decently. For this reason I have created a one level Super Mario game which has almost all the 'rules' of how to make your game work.
During this instructable I will be referring to certain things and will just call them by either abbreviations or by other names entirely. The first thing you need to do is download Scratch.
It is a free and can be found at scratch. Once you have downloaded scratch I suggest fiddling around with the "rules" and with the examples they give you; try figure out how they work and then make your own. Once you have had enough of fiddling, create a new program and create 8 sprites, 13 if you want to do coins. When you create a new sprite it will ask you to make a new image. Just place a dot in each of them. Later on you will change each of the images.
The next thing you need to do is get your images. You can either make your own or you can get some from the internet. I got most of mine form the internet and have placed them in the images for you to get.
They are in their raw form so some editing will have to be done. I however created my own coins as I couldn't find any images of flat faced coins. He will be sprite 1. Once you have done so it will go back to the screen where you clicked the import button which is like Microsoft paint, but better.
Your image is likely on a background colour of some sort, so go to the 'fill' tool and click the colour in the bottom right corner the four small grey and white squared colours and then click on the background.
It will turn it into the surrounding colour. This allows you to completely focus on Mario. I noticed that I couldn't find a walking Mario, so I decided to make my own out the jumping Mario. First you must copy the jumping Mario by clicking copy, then click edit, remove the background of Mario, and then copy his arm to the right and in front using the stamp tool.
The reason for this is that with the paint brush you have to be very careful where you move it as it could destroy your whole piece and you'd have to press undo and start over, whereas the line tool only goes where you tell it to. Once you have done this, flip it horizontally, set it aside and get to work on his arm to the right that's behind him.
The major thing here is the thick black outline that joins to his head, hat, nose, moustache and body. Once done you should get the image like the second image. Before you go on, change the fill colour to yellow and click the background.
You should now see all the pieces that still need to be deleted using the eraser tool. I suggest using the second smallest size as the smallest size can get lost in the colour black. Once you have finished editing Mario, use the select tool and move him over his arm. You don't want to see it coming out of his foot, so keep jiggling around Mario until you get him looking like image 3. Once you have done this click OK and save your piece.
Remember to do this regularly. The last thing about Mario is that you need to make him look both ways, so copy each image you have of him, go into edit, select Mario and finally flip him horizontally. For the flooring, I used the grassland set of the scenes that I provided, but you can use which ever you want. First you need to make a base flooring, in any unused sprite, i. You should get rid of everything except for the 8 blocks, see image 1.
Once you have done this use the select tool to move the blocks together to get something like image 2. Finally use the dropper tool to acquire a colour close to the top of the top blocks, and create a line, using the smallest size, and place a straight line across the top of the four blocks.
I will explain why you have done this later, but do this for all the tops of all the blocks that you have created. Now you need to create your own sets. I made 5, but one was a copy of image 5. The reason I only created 4 is because my game which I created used coins which completely slowed down my game as I tried to make it longer, so I shortened it.
Next you have to create a border. This is where our border comes in handy. It not only covers up those images but also frames what is going on in the game. You can also put things on top of it, like a M for Mario or whatever you want.
You'll have to create your border with the rectangle tool. There isn't a real borderline I can give you, but look at mine, image 9, and try make yours like mine.
Where you have your scripts, on the left, you should see a script there that you didn't create, called stage. This is where you upload your background that doesn't change throughout the script. Lucky for you, a platformer like this needs only a very simple collision detection engine. Note: Forgot what a bounding box is?
Usually this is straightforward and is the same as the frame of the sprite including transparent space , but when a sprite is rotated it gets a little tricky. First, you need to find the bounding box of your Koala. Every sprite loaded has a bounding box that is the size of the texture and is accessible with the boundingBox property. The texture usually has some transparent space near the edges, depending on the Koala sprite.
When Mario is unable to further move into a block, is he just barely touching it, or do his arms and nose encroach just a little bit into the block? This first method gives you the coordinate of the tile based on the position you pass in. In order to get a tile position, you just divide the coordinate value by the size of the tile.
The second method reverses the process of calculating the coordinate. It multiplies the tile coordinate by tile size. Why do you add one to the tile height coordinate?
Remember, the tile coordinate system is zero-based, so the 20th tile has an actual coordinate of Now move on to the method that will retrieve the surrounding tiles. This array will contain the GID of the tile, the tiled map coordinate for that tile, and information about the CGRect origin for that tile.
For example, you want to resolve collisions for the tiles directly left, right, below, and above your Koala before you resolve any collisions on the diagonal tiles.
Before we go section by section, note that you're passing in a layer object here. In your tiled map, you have the three layers we discussed earlier - hazards, walls, and backgrounds. Having separate layers allows you to handle the collision detection differently depending on the layer. There are other ways to distinguish between different types of blocks, but for your needs, the layer separation is efficient.
Note: You only need information for eight tiles, because you should never need to resolve a collision with the tile space in the center of the 3 by 3 grid. You should always have caught that collision and resolved it in a surrounding tile position. If there is a collidable tile in the center of the grid, Koalio has moved at least half his width in a single frame. He shouldn't move this fast, ever - at least in this game!
To make iterating through those eight tiles easy, just include the tile position of the Koala and remove it at the end. Often in the case of the tile directly under the Koala, resolving the collision will also resolve the collisions for the diagonal tiles. See the figure to the right. By resolving the collision beneath Koalio, shown in red, you also resolve the collision with block 2, shown in blue. Your collision detection routine will make certain assumptions about how to resolve collisions.
Those assumptions are valid more often for adjacent tiles than for diagonal tiles, so you want to avoid collision resolution with diagonal tiles as much as possible. Here's an image that shows the order of the tiles in the array before, and after, the resorting. You can see that after the resorting, the bottom, top, left, and right tiles are resolved first. You're almost ready for the next build to verify that everything is correct! However, there are a few things to do first. You need to add the walls layer as an instance variable to the GameLevelLayer class so you can access it there.
First you'll see you're getting information about tile positions, and every so often a GID value but mostly zeroes, because it's mostly open space. Ultimately, this will crash with a TMXLayer: invalid position error message though. This happens when the tileGIDat: method is given a tile position that is outside the boundaries of the tile map. You will catch and prevent this error a little later on — but first, you're going to stop it from happening by implementing collision detection.
Up to this point, the Koala got to set his own position. You don't want him bouncing all over like a cat on catnip! So, he needs a new variable that he can update, but that will stay a secret between himself and the GameLevelLayer — desiredPosition.
You want the Koala class to calculate and store his desired position. The same applies to the collision detection tile loop — you don't want the collision detector updating the actual sprite until after all the tiles have been checked for collisions and resolved.
This computes a bounding box based on the desired position, which the layer will use for collision detection. Note: There are many different ways you could have calculated this new bounding box.
You could have implemented code similar to that inside CCNode's boundingBox and transform methods, but this way was a lot easier, even if it is a slightly roundabout way to get what you want. Next, make the following change to the update method so that it's updating the desiredPosition property instead of the position property:.
Now it's time for the real deal. Add the following method to GameLevelLayer. You might think the best way to do so is to move your Koala backwards out of the collision, or in other words, to reverse the last move until a collision no longer exists with the tile.
Consider this: gravity is constantly pulling the Koala into the tiles underneath him, and those collisions are constantly being resolved. If you imagine that the Koala is moving forward, the Koala is also going to be moving downward at the same time due to gravity. If you choose to resolve that collision by reversing the last move forward and down , the Koala would need to move upward and backward — but that's not what you want!
See the line by line changes made to the engine. You can copy bug fixes over to a game you've already started! Did you find a bug in the engine?
Do you have any suggestions? Post them on the issue tracker! The engine is licensed under the New BSD License , which gives you permission to do whatever you want with the engine, as long as you give credit. Do you like the Hello Mario Engine? Let others know! Show your support for the Hello Mario Engine using these banners!
Learn Making a Mario game is as easy as ! Mario Editor Looking for an easy to use level editor? Learn More. Download Latest version: v6. Changelog Hello Mario Engine v6. Hello Mario Engine v6. Showcase Examples of games created using the Hello Mario Engine. The Shroom Project Mario with guns, blood, and an epic tale. Hello Fangaming Collection 10th anniversary level collection.
Super Mario Dynamo Challenging Mario platforming with hardcore wall-jumps. Super Mario Eclipse Colorful Mario platforming with challenging puzzles. Features Anyone can make a Mario game. Even you!
0コメント