11 replies to this topic

[Desert Dog]

• Title: D_D's 3d Breakout Tutorial+example source game
• Description: A set of step-by-step examples, which go through building a 3d breakout
  game, from the ground up, and shows different techniques that can be used to create the game. Requires basic GML knowledge
• GM Version: GM6+ pro.
• Registered: Yes of course.
• File Type: .zip containing 14 .gm6's. example, 1 .exe of game, and +1.gm6 for the source of that game.
• File Size: 3.9 mb
• File Link: Yoyogames Download link <click me!>

Additional Info

First off, Controls! Right click to create a ball, and then left click, to shoot it off! These are only examples, so you can't 'beat' levels, yet.

Ahem,

Anyway, so I've finally got around to start working on that 3d breakout tutorial that I promised to work on.

I don't plan it to be a very indepth, explanatory type tutorial.. there are lots of different resources you can find to explain various GM's functions. This is merely going through the different techniques you may have in a 3d breakout game, and how to implement them using GM.. via examples.

1: The basics;
This shows a simple set up in 2d, which is the basis of our 3d breakout engine. Our games going to play pretty 2d, anyway by the time we are finished. ;D

There are a few important things to note here. For instance, setting the the walls to non-solid, and having our own collision event, while we have the blocks set to solid, and we only collide with them when they are solid with move_bounce_solid.

Later on in the tutorials, this will become important as we want to add stacked blocks on top.. simply making them non-solid if they are in the air, and we have no collision problems!

2:Basic 3d

In this one, I've set up a basic obj_camera, which 'shoot's and captures the room, from a place just outside the room. I've also added basic textures, and drawn 3d blocks, and ellipsoids,

If you set the obj_ball to the same depth as the blocks, you will notice some odd glitchy looks when the ball collides with blocks. This is why we want to draw each object.. especially those that may overlap, and a slighly different depth.

3: Basic 3d scene
In these 3 examples, I demonstrate different methods of drawing the level/3d scenary. Mostly, this stuff has nothing to do with the game itself, it's just to sit there and look pretty. Because of this we can get away with some cheap tricks, which look great!
(a)Part1:
Here I simply draw a '3d' scene using d3d_floor, and as from the previous example, the 'wall' blocks are drawing.

You can draw more complex models, too, like higher walls, bars, etc. This is what I did in Prison Ball, and you can make some fine scene's.

The problem with this method, is that every thing you draw, will slow down your game. You can get away with a fair bit, but GM's not the fastest 3d engine out there, and it'd be nice to save as much cpu as you can for effects. This leads us to.....

(b)Part2:
In Part2, we don't draw a 3d anything in the background.. you'll notice I made the room walls invisible, and they are no longer drawn.

I draw a 2d image as the background, and then draw all our 3d stuff over that. This saves a LOT, and still looks great! There are a few disadvanges to this, i.e. d3d_lighting won't really work on it now! And also, the camera must stay static, so no jiggling up and down following that ball move! But, I don't like 3d breakout games which have the camera following the ball around anyway, so heh.

Lots of great looking 3d breakout games use this technique, one of which being Nuclear Ball:
[image limit]
http://desertdoggames.files.wordpress.com/2011/03/nuclear-ball-screen4-ref.jpg?w=300&h=225

I've added a simple animated 2d sprite to the background, too. Here's a screenshot (because I think it looks cute)
[image limit]
http://desertdoggames.files.wordpress.com/2011/03/breakout_01.png?w=300&h=224

so what happens when none of the two really work for you? Well, we get to...

(c )Part 3:

Use both! There's no reason why you can't draw a small, condensced 3d scene which you can use to play on, while using a 2d background for that 'non-essential' stuff, while still having it look high-quality&saving on a lot of speed!

In this example is simply a combo of part 1-2, we have a starry background, with a satellite thingie going in the background.

4: Basic effects.

In this example, we build from the scene2 background drawing technique from the 3 scene examples earlier. I use this because it will save me a LOT of speed in drawing, and potentially look the best(see Nuclear Ball screenshot above for example!). For the game I envision, this is well worth the sacrifice of being stuck with a static camera (if you try moving the view, it'll look weird with a 2d background!) and having the background not light up with d3d lighting.

O.k. now that I've finished that.. in this example, I show you how to have simple '3d particle' effects when breaking blocks. The technique in this game is similar to what I used in Prison Ball.

Also, I show how to have a 'fire' particle trail effect, like how I did it in Prison Ball. When playing the example, press <1> and see your ball burst into flames.

If you want to see a slightly more animated/vibrant fire tail, go to the obj_fire_particle Create Event, and uncomment this line:
sprite_index=choose(spr_fire_1,spr_fire_2,spr_fire_3);

The tail should now flicker about, although it currently flikers quite wildly!

5: The Power ups:

In this example, I quickly have added power up objects, which randomly fall from bricks that have been destroyed.

The <1> hot key for the fire ball is removed, but you can get the fireball powerup, and a 3 ball powerup, and a score power up.

Powerup icons can be tricky to make and texture, and I'd recommend you put some thought into making sure the player can easily recognise what each powerup does.

6: Simple Stacking:

In Prison Ball, I didn't really use stacking. I had tall blocks, which as they got hit, were drawn shorter and shorter. While this could still be used to create some interesting levels, it was limited. I'm not going to have an example of how to do this, but I'd recommend you take a shot at trying to do it, even if you want to have stackable blocks in your game.. the practice will be worth it!

What we want to do is to have seperate blocks being able to stack on top of each other, so we can build cool 3d scenes, like Magic Ball:


So in this example I show you in an excessively simple way how to have blocks stack on each other, you destroy the block beneath it, and it falls, etc.
Our game looks a bit like this now:
[image limit]
http://img816.imageshack.us/img816/9307/breakout.png

However, as you check out the example, you'll quickly see how hard it is to even think about designing a level like the Magic ball one using GM's 2d level editor, and our current method of stacking blocks.

Later on, I will rewrite how you stack blocks (so it uses only 1 object!!) and implement it into a 3d level editor which I'll show you how to make. The codes will be a bit tricky, and I'll leave it to this example to show you the 'basic idea' of stacking blocks, anyway!!

7: Visible trick

Stacking blocks has left us with a problem/issue, which you may, may not want to resolve. Simply put, with tall blocks, the ball, or power up icons that are behind them cannot be seen, and the player is left not really knowing if he has a power up coming, or how the ball is bouncing.

In this example, I show you a little trick to make the ball partially visible through blocks.. note that the blocks themselves are still solid, and not using alpha at all!

By setting the objects to a lower depth than the block objects, and turning d3d_set_hidden() off, we can make sure how ball, or powerup is always drawn in front off blocks.

I don't want to fully draw them when they are behind blocks, so I draw it twice.. once, normally, and the second time for just when it's behind blocks (so hidden is off, and alpha is set to 0.2)

Here's how it looks:


Note that since your drawing your models twice, this is a pricey effect. So far, we've got cpu to burn for our project, but as we draw more and more complex models, things start adding up. You may even want to draw a simple sprite icon for when it's behind the blocks.

8: Simple 3d level editor, and rewritten block stacking

The code for block stacking in this one is significantly trickier. You may even want to write your own way of doing it, but the basic idea is here for you to see.

The 3d level is currently still VERY basic. You cannot even delete blocks yet, and you can't change colors of blocks, and we still only have 1 block type! Still, it'll be good to see it now in it's simplist state, later on we'll look at adding the ability to change colors, have different block types like squares, or models we load ourselves.

More importantly, you'll see how much easier it is to create a 3d level using a 3d editor, rather than in a 2d one!
Here's a level made with it:


Currently, there is no GUI, so press <S> when your in the level editor to save levels, and when your in Play mode, press <L> to load.
You still have to create your own balls with right click in these examples.

Now is the time to really settle what angle you want your camera at, if your wanting a static camera. If your building levels, and they are starting to go out the top of the screen, you may want to pull back, lower down, angle up, etc etc.

You don't want to get half-way into your project, and find you have to re-do all those static backgrounds you created!!

9:Extended 3d level editor

Remember the level editor from step 8? (of course you do!)

I've continued on. First up, there was a slight bug in the fall-when-block below you is deleted... this was due to the order in which instances more. Look at the new version, and see how I use a simple check variable to get around this issue.

In this latest version, I continue to show you have to add simple
1: Add color of your choice to your blocks, and save&load them in levels.

2: Add a few more block types.. we now have a 64x64x32 square, and a 32x32x32 spikey-thing.

3: How to delete blocks from the level editor.

Here's a screenshot of a level which was made using the Editor now:



How to use editor:
Press 1 to select normal rectangle block
Press 2 to select square block
Press 3 to select spikey thing.

Press <C> to select a color for your level.

<Right click> to delete a block.

<S> Saves, as usual, and when you want to try your level, same with Part 8, you press L to load.

The different color was the simplist part, you'll notice I simply use a grey scale texture now, and when I'm drawing the blocks, I simply use draw_set_color to get the color I want.

You'll notice that the code for each new block is idential to the original blocks.. adding new blocks is made easier!!
However, currently new blocks can only be 32 z high... I need to make it more flexible, so you can make blocks that are 64, or 96 high, too.

As an idea for you to try it yourself, try making each object have a zmax variable, which is = to the height of each block. (so zmax would = z+32 on these blocks..!)
We'd then use zmax to decide our stacking collisions.

I think that's all for this file..

10:Loading 3d models in-game

Here I show you a quickly how to load a .obj model into your game.

I use percscish.us’s d3d_model_load_obj script, which is the easiest way *I* know of loading a model into your game.

We load the model first thing in the game, check out the create event of obj_persistent. After the model is loaded, you simply draw it in the draw event. Easy-peasy!

Note, this is just a quickly example.. the model is really ugly!! Make nice looking modes with sweet textures, please!

11:Invisible Blocks

In this example, I show you how to do ‘invisible’ (but still visible!) blocks, so we can have mid-air objects.

We ‘could’ just draw a normal block, and set it’s alpha really low, but the results would look a little, um, ‘hicky’. (do try it! you may like it!)

Here, I create a model (in obj_persistent create event.. we want to load our models first-thing!).

I create it out of lines only. So it’s an outline cube. That’s our invisible block! I draw it with a little bit of alpha, too.

You may notice that in the draw event of the outline block, I use a lot of seemingly unnecessary transformation functions.

That’s because of a bug in GM, if you create model using d3d_model_vertex, then it won’t draw on a different z scale unless you use transformation functions.

This doesn’t apply to d3d_model_vertex_color, of d3d_model_vertex_texture, etc. So don’t worry about the bug affecting you too much… only when you want ‘wire-frame’ models!

Here’s a level I used using invisible blocks to add height to my scene:


12:Different Heights.

In this final example, I show you how to have blocks with different heights.. I’ve rewritten how the collisions work, so that they work with with colliding with zmax, which is the top part of a model. (zmax = z+height size)

It’s quite a simple re-write, but makes the entire game so much more flexable. Do have a good look at it!

Continuing from here:

Things you may want to do yourself:

Convert all d3d_draw functions to models.. much faster!

Work on the 3d level editor.. it’s functional, and much better than a 2d one, but still too limiting! Have it so you can rotate around the scene, place rotated blocks, and other cool stuff!

Conclusion:

Opensource Game: Stickman’s Breakout

In conclusion to this set of examples, I complete it with a quick open-source game which you can play. It uses many of the techniques I showed you, and turns it into a game form, so levels now load consecutively, score is added up, you can lose lives now.

I think it’s pretty fun. But you can make something better!

Best of luck.. break a block!

~DD

(P.S. It's a pretty large set of examples, done in a relatively short period of time. My written up explanation probably isn't the best there could be, so any feedback along those lines would be great!

You can see this tutorial, without image limit restrictions off my website here:
http://desertdoggames.wordpress.com/2011/03/30/3d-breakout-tutorial-using-game-maker/
)

Edited by Desert Dog, 10 April 2011 - 11:11 AM.

[mikaldinho]

This is great!

I cannot believe no-one has commented on this topic yet!

[Desert Dog]

I can't believe I've got 75 downloads off Yoyogames, and no one has rated it yet!

Thanks for trying!

[MudbudGoldfish]

WOW THIS IS AMAZING!!!! Its very explanatory and well made!! Thank you!

[Himalayan 3d]

that's cool man you'r great

[Desert Dog]

Thanks for the compliments guys. I this tutorial helps you make your own 3d arkanoid game, or perhaps a similar viewed 3d game!

[Dark Matter]

Nice example
The stacking blocks is quite clever (gameplay-wise). One thing I noticed though. When you get the 3-ball power-up and you lose a ball, you lose a life. In most breakout games you only lose a life if you lose the last ball on the screen, otherwise it's too hard.

[Desert Dog]

Thanks for the comment Dark Matter!

With regards to the gameplay, yes, I know. But this is game with a whoping big ball which moves pretty slow, big blocks, and a decent sized bat. So I make it getting a 3-ball makes clearing the level even easier, but also adds an element of danger!

It's something a bit different I wanted to try out. Not sure how well it works, I like it.

And guy, any support like, rating 5 stars, or sending the link on to a friend is appreciated! Thanks!

Edited by Desert Dog, 23 April 2011 - 12:11 PM.

[Dark Matter]

And guy, any support like, rating 5 stars, or sending the link on to a friend is appreciated! Thanks!

Oops, forgot about that. The problem has been rectified now, don't worry

[Desert Dog]

And my thanks for that!

***************************************

I worked on another part a little bit, but realised afterwards I made it in GM8. Eventually, I'll probably re-save everything in this as GM8, maybe, but for now, I'd like to keep symetry.

So this is an unoffial 'update' post.. I won't post a .gmk/6, but I'll talk about what I'm showing, and post code.

If I get a few more ideas, I may write about them, too, and once I've got a few I'll update the topic with editables, maybe.

Anyway, do you don't miss out..

The Unofficial..
Part 13: Dynamic blocks.

If you play 3d breakout games, or pinball games much, you may notice that sometimes objects are kinda 'bouncing'.. well, it's hard to explain, but they are dynamic, moving. No, I don't mean they are rotating, but they are shrinking/growing/shrink again etc. Not shrink/grow completely small or big, but enough to give it a bit of bounce, and add life to the image.

And maybe it's a 3 hit block, rather than having your ball bounce off the block, with the block not doing anything, you can make it 'bounce' like this.

Anyway, Imma gonna show you how to do that.

First up, just load up Step 12's editable. We'll work with that one. open up obj_block.. we could use another one, but we'll stick with this one for now.

In the create event, add this:

scale=1;
scale_down=true;

What this is is the 1: current scale that we are at, and 2: the other one will decide which direction we are 'scaling' in.. scaling up (big) or scaling down (smaller)

Now, here's the trickier bit. In the draw event, we will have this code

if scale_down=true
{
    scale-=0.01;
    if scale<0.8
    {
        scale_down=false;
    }
}
else
if scale_down=false
{
    scale+=0.01;
    if scale>1
    {
        scale_down=true;
    }
}

draw_set_color(my_color);
d3d_transform_set_identity();
d3d_transform_set_scaling(scale,scale,1);
d3d_transform_add_translation(x+32,y+16,z);
d3d_draw_block(-32,-16,0,+32,+16,+32,tex,1,1);
d3d_transform_set_identity();
move=true;
draw_set_color(c_white);

Now lets quickly look at this code.

The first part, which is this:

if scale_down=true
{
    scale-=0.01;
    if scale<0.8
    {
        scale_down=false;
    }
}
else
if scale_down=false
{
    scale+=0.01;
    if scale>1
    {
        scale_down=true;
    }
}

Simple changes scale up and down, and makes sure it never goes too low, or too high. So that's simple enough.

move=true;
draw_set_color(c_white);

This is from the previous versions, move is just for making sure we fall if nothing is beneath us. You should know this if you've done the tutorial!

And now

draw_set_color(my_color);
d3d_transform_set_identity();
d3d_transform_set_scaling(scale,scale,1);
d3d_transform_add_translation(x+32,y+16,z);
d3d_draw_block(-32,-16,0,+32,+16,+32,tex,1,1);
d3d_transform_set_identity();

Now this looks pretty tricky! Remember, check the GM help manual as your doing going through these functions.

Experiment about with removing functions like d3d_transform_set_identity() and notice what happens.

Also, note how I'm setting the translation (x+32,y+16,z..)
Why am I doing this? Don't I just want x,y,z?

Well try it! And see what happens.

And why am I drawing the block at -32,-16,0, etc, don't I want x,y, and stuff?

I do want x,y, stuff.. and I'm already there! Because of the translation stuff I set above (see d3d_transform_set_translation) I've already translated the drawing to happen at those coordinates in the room.

Anyway, so check out the codes, add them in as I say, then test the game. You'll notice the obj_block will now grow&shrink.

You probably don't want it always doing that, or at least, not this object. But this dynamic effect will be nice for hitting 'hard' blocks which don't break.. rather than being unmoving, having them give a small 'bounce' as they are hit will add a lot to your game!

Edited by Desert Dog, 05 May 2011 - 10:24 PM.

[Desert Dog]

*Whack!*

[Desert Dog]

In celebration on becoming a Staff Choice Tutorial, let's all go out and break bricks together!