• Building a game in GameMaker #9

    A lot has been changed since the last time a wrote! I added NPC’s, challenges, enemies, etc. Too much to tell! I also choose a name for the game: “Just a Man and his Ladder”. To keep track of things, I made a wiki. You can find that wiki here:

    Just A Man And His Ladder – Wiki

  • Using Shaders in GameMaker

    I wanted to have a minimap in my game. That minimap should show the screen plus a bit extra in only two colors: one for the background and one for the obstacles. To get this done, I had to find a way to make all colors even in the minimap (a small viewport). How? Shaders!

    Shaders

    Shaders might look complicated, but for simple usage they’re .. fairly simple if you know how to use them! Let’s do a small tuturial!

    How to: shaders in gamemaker.

    In your Asset Browser, create a new shader. Call it anything you like (I’ll use “Shader1”). Double click it to open the code. You’ll see two code blocks. We’ll focus on the second one: “Fragment Shader”. This is how the code looks by default:

    varying vec2 v_vTexcoord;
    varying vec4 v_vColour;
    
    void main()
    {
        gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
    }
    

    This fragment shader is a shader that works on all pixels of the entity it is applied to. … meaning:

    1. You have to apply the shader to something
    2. Whatever that something is, all pixels drawn are changed by the shader.

    We’ll look at the second point first. And we’ll keep it simple!
    We’ll tell the shader to draw any pixel in a single color. You do this by changing the code in void main():

    void main()
    {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
    

    What matters here is that you enter four values. They represtent Red, Green, Blue and Alpha. So in this code you tell the shader to make every pixel:

    full red (1.0) – the first value

    not Green (0.0) – the second value

    not Blue (0.0) – the third value

    not Transparent (1.0) – the fourth value (lower the value to get transparancy).

    So you enter RGBA values from 0 to 1.

    That’s it for the shader: we made a shader that turns every pixel red.

    Next, we’ll have to apply it somehow.

    Applying Shaders to Objects

    You can apply a shader to a single object. You do that in the Draw-event of the object. It’s fairly staight forward. Imagine you want your player to be red when bRed == true. This would be the code in the draw-event of your player:

    if (bRed){ 
       shader_set(Shader1)
       draw_self();
       shader_reset();
    }

    Don’t forget to reset the shader (shader_reset()).

    Next, let’s look at how to apply a shader to multiple object. You can do this by applying a shader to a full layer.

    Applying Shaders to Layers

    The place to do this, is in the Room creation code. You’ll need three code blocks: one for calling the shader, and two for telling the shader what to do. Let’s start with the full code (which you place in the room creation code):

    
    function layer_shader_start()
    {
        if (event_type == ev_draw)
        {
            if (event_number == ev_draw_normal)
            {
                   shader_set(Shader1)
                   draw_self();
             }
        }
     }
    
    function layer_shader_end()
    {
        if (event_type == ev_draw)
        {
            if (event_number == ev_draw_normal)
                shader_reset();
            }
        }
    }
    
    var lay_id = layer_get_id("The name of the layer");
    layer_script_begin(lay_id, layer_shader_start);
    layer_script_end(lay_id, layer_shader_end);
    
    
    

    In the first function “Shader1” is the shader we’ve just created. You can give the functions a different name if you like, as long as you call them in the bottom two lines.

    First you get the id of the layer you want to apply the shader to. (var lay_id etc. Use the name of the layer as shown in the inspector).

    Then you use “layer_script_begin” to tell GameMaker what to do when drawing the layer (and its full content).

    Finally you tell GameMaker what to do when the layer has been drawn.

    The result: everything in the layer will be red!

    Shader in action: a mini-map at the right top. (I choose purple)

    Shader in action
  • Building a game in GameMaker #7

    When the game starts, all previously generated tiles are read from a file and placed in the game room. This file can grow in time, so I wanted to test it’s limit.

    I made the following test-function to generate lots of tiles:

    function GENERATE_TEST_DATA(){
       
        for(var i=0;i<800;i++){
            
    ;        for(var t = 0;t<600;t++){
            ADD_TO_TILE_ARRAY(i*8,t*8+2400,"P");
            }
        }
    }

    This adds 800×600 = 480000 tiles.

    I used debug messages to measure the time. The result in the video!

    (..and I had a lot of fun making some loops in Rytmik)

  • Building a game in GameMaker #6

    Building blocks

    The game has an open world. I want the player to be able to build and demolish. For that I started searching for a way to place and remove blocks, and to save the state of the game. That was a challenge! Let’s start with placing and removing blocks.

    The grid

    In the basis, building blocks is as simple as placing a sprite at the mouse x and y position. This however results in a mesh. By using a grid the blocks are placed in a proper position. The blocks are 8 by 8 pixels, so the coordinates of the blocks should be in a grid of 8 by 8.

    When clicking the mouse on e.g. x=36,y=27, the block should be placed at x=32, y=24 (divisable by 8). I found the following simple solution:

    var offsetX = _x%gridSize;
    var offsetY = _y%gridSize;

      var _gridSize = 8;
      _x = mouse_x;
      _y = mouse_y;
    
      var _offsetX = _x%_gridSize;
      var _offsetY = _y%_gridSize;
            
      _x -= offsetX; 
      _y += -offsetY;
    
    

    This did the trick, by using _x and _y, blocks are placed exactly in the grid. Of course a lot of other code was needed to get it done, but this was the starting point.

    Saving

    Saving the game state was a hard one. I could not find any ready-made function for that in gamemaker. There are some (using buffers), but they don’t work, are obsolete, or can not handle huge amounts of data (the gamemaker docs suggest you build your own system).

    In my game, thousands of blocks can be placed and/or removed. When the player exits the game and starts it again, the blocks should be where they were when the player left.

    I accomplished this by using an array. Everytime a block is placed or removed, an entry is added to the array. When the player exits the game, the array is saved to a file. When the player starts the game, the array is loaded, parsed, and the blocks are placed in the game room.

    To make this work, I avoided complicated string functions (like string_pos), because they use a lot of resources.

    The (mock-up) code:

    
    function SAVE_GAME(){
    // Called when exiting the game
       SAVE_TILE_DATA();
    }
    
    function LOAD_GAME(){
       STRING_TO_TILES();
    }
    
    function STRING_TO_TILES(){
      var commaSeparator = ord("B");
    
      LOAD_TILE_DATA();
      var tmp = string(global.TILE_DATA);
    
      tmp = string_replace_all(tmp, "\"", "");
      tmp = string_replace_all(tmp, "[", "");
      tmp = string_replace_all(tmp, "]", "");
      tmp = string_replace_all(tmp, " ", "");
    
      global.TILE_ARRAY = [];
    
      var cnt  = string_length(tmp);
    
      if (string_length(tmp)>3){
          global.TILE_ARRAY = string_split(tmp,",");
      }
    }
    
    function ADD_TO_TILE_ARRAY(pX,pY,pTag){
      // called when player adds or removes block. 
      var commaSeparator = "B";
      var tmp=string(pX) + commaSeparator + string(pY) + pTag;
      var cnt = array_length(global.TILE_ARRAY);
      global.TILE_ARRAY[cnt] = tmp;
    }
    
    function SAVE_TILE_DATA(){
      global.TILE_ARRAY = array_unique(global.TILE_ARRAY);
      var file;
      file = file_text_open_write("D:\data.txt"); // sandboxing off in project settings
      file_text_write_string(file,    string(global.TILE_ARRAY));
      file_text_close(file);
    }
    
    function LOAD_TILE_DATA(){
    
    if (file_exists("D:\data.txt"))
    {
        var file = file_text_open_read("D:\data.txt");
        global.TILE_DATA = file_text_read_string(file);
        file_text_close(file);
    } 
    }
    
    function SETUP_TILES(){
    // called when starting the game
    LOAD_GAME();
    var cnt = array_length(global.TILE_ARRAY);
    
    for(var i = 0; i<cnt;i++){
    
        var tmp = global.TILE_ARRAY[i];
    
        // split entry
       if (string_ends_with(tmp,"E")){
            // SET EMPTY TILE
            tmp = string_replace(tmp,"E","");
            var a[];
            a = string_split(tmp,"B");
    
            var _x = a[0];
            var _y = a[1];
            // place empty
            tilemap_set_at_pixel(tilemap, 0, _x, _y);
    
        }else{
            //SET TILE
            tmp = string_replace(tmp,"P","");
            var a[];
            a = string_split(tmp,"B");
    
            var _x = a[0];
            var _y = a[1];
            // place tile
            tilemap_set_at_pixel(tilemap, 1, _x, _y);
        }
    }
    }

    So, when the player places a block, the block is added to the array (ADD_TO_TILE_ARRAY)

    When the player exits the game, SAVE_GAME is called.

    When the game starts, SETUP_TILES is called.

  • Building a game in GameMaker #5

    Player is ready … for now. I made about ten different version and chose one. Red clothes, blue backpack and white shoes. As I am stil “grayboxing” I do not want to spend too much time on it. Design shouldn’t be in grayboxing at all, but that’s not how it works for me. Visually it has to be right in some way for me before I can proceed. No tweaking, but the basis should be there. The next challenge: building blocks.

  • Building a Game in Gamemaker #4

    The game will be a pixel game. Pixel games are often called “retro.” However, I wouldn’t be surprised if more pixel games have been built in the last ten years than during the actual “retro age.” Games made in the ’70s and ’80s were more futuristic than anyone could have imagined at the time!

    I started animating my player—this is my first try. After this, I’ll follow some tutorials to see what I can improve (or maybe start all over again). It’s my baseline. I’ve made animations for walking, attacking, jumping, and climbing. When on a ladder, the attack will be pointed towards the x-position of the mouse.

  • Building a game in GameMaker #3

    Games need a lot of art. I want to make all the art myself, so I followed a few tutorials about pixel art. Today I learned about the usage of colors in pixel art. There are some different approaches when it comes to using colors. I want to point out one “rule”:

    Use three colors per material. A material is e.g. a skin, a shirt, a door, etc. If needed, add one, but only if you really need to.

    Use the following colors:

    • one for midtones
    • one for shading
    • one for highlights

    Choose a color for the midtones, e.g. blue.

    To get a good shadow color, increase the hue slightly , lower the value, play with the saturation.

    To get a good color for highlights: lower the hue, increase the value, and play with the saturation again.

    Note: the shadows are a the shadows on the material. If you need to pick a color for the shadow of an object on the ground: take the color of the ground, increase the hue slightly and decrease the value. So do not simply use black or dark blue.

    Today I created an elephant!

    My approach: I took a photo from the internet. In my drawing program I used it to draw the outlines. I exported the outlines and loaded them into Aseprite. There I resized the image to 64×64. I fixed all lines, chose colors and started filling shades and highlights.

  • Building a game in GameMaker #2

    My first thought was to make a top-down game. When I started trying some things, I found out that a front-view platform style would be more versatile. I did a small graybox: movement, sword attack, gathering, jumping and … a ladder. The player carries a ladder that can be used to climb to higher platforms. By gathering ladder pieces, the ladder gets longer.

    Just a graybox video, nothing more:

  • Building a Game in Gamemaker

    The start

    It has been long since I worked with gamemaker. In the past I used it to make some mobile games (Hubert Jumps, Operation Clean-Up, Square this!, unfortunately all no longer available)(tip: when you get a message from your google developer account telling you that you should update your info, do so! If you don’t, you can loose everything… learned the hard way…). To refresh my memory I started following some tutorials.

    I started with this one: Complete Guide to Making Your First RPG, which I highly recomment! It is quick , no nonsense, and directly to the point.

    Before I started looking back into Gamemaker, I upgraded my Unity knowledge. There is no connection between Unity and Gamemaker, the two are completely different game engines.

    Unity offers “Unity Learn“, which I also highly recomment. When you follow the pathways, you not only learn about Unity, it teaches a lot of general concepts about building games as well. The pathways come with some assignments. If you follow all tutorials in the pathways, and if you upload your assignments, you’ll get some Credlies.

    The Brainstorm

    When building a game, you’ll have to come up with an idea first. I have always found this difficult. This time I changed my approach: instead of writing down all my ideas, I started writing a story. While writing that story, game ideas popped up slowly.

    The story (recap, in short, outline only)

    The world was taken over by aliens 150 years ago. Earth has been largely destroyed, largely controlled by aliens (enemies). A few groups of humans have survived (friendly npc’s).
    The aliens were already at war with other aliens before they came to Earth. These other aliens are also on Earth (friendly npc’s), supporting the remaining human resistance.
    There are some friendly aliens, and mostly unfriendly ones. The friendly aliens are hidden in ancient cities and caves. The others are everywhere.
    Humans, like the friendly aliens, hide in ancient cities and caves.
    The aliens are intolerant of water. This is an advantage for humans. When it rains, the aliens are weaker.

    The evil aliens spread fungi that attack/eat all human beings and structures(like blobs in old movies). These grow slowly and are a constant threat to everything you build (so you can build structures in the game).

    You build safe place to survive. When doing so, other humans (npc’s) will find shelter. However, the fungi is always a threat, just as direct attacks from the evil aliens.

    The friendly aliens bring a lot of technology, which you can use to fight the blobs and evil aliens. This technologie however comes with a price. Earth metals, farming products, and other craft products can be traded for that technology.

    Trade is possible as long as you are in good standing with the friendly aliens. The more you trade, the more they like you, the more advanced technology is shared.

    … this story goes on and on. It offers a lot of game mechanics. I found it easier to come up with these mechanics by writing this story. Hopefully the story will help me designing and building the game and its required art. For now, this is not more than just a brainstorm.

  • While you’re here…

    Content will be added as my projects progress. For now, how about playing a little game?

    Unity Play | Little Bouncing Ball Game game