{"id":188,"date":"2023-07-10T12:42:46","date_gmt":"2023-07-10T12:42:46","guid":{"rendered":"https:\/\/www.infodreams.it\/main\/?page_id=188"},"modified":"2023-07-10T23:30:16","modified_gmt":"2023-07-10T23:30:16","slug":"dev-131-creating-a-videogame-in-gamemaker-6-part-2-of-3","status":"publish","type":"page","link":"https:\/\/www.infodreams.it\/main\/publications\/dev-magazine\/dev-131-creating-a-videogame-in-gamemaker-6-part-2-of-3\/","title":{"rendered":"Dev 131 \u2013 Creating a videogame in GameMaker 6 \u2013 part 2 of 3"},"content":{"rendered":"

<\/p>\n

As promised, with this appointment, we will begin the construction of the video game proposed in the previous article. We will have the opportunity to learn, in more depth, the use of this fantastic tool, arrived in recent days to the version 6.1.<\/p><\/blockquote>\n

\n

<\/span>Introduction<\/h2>\n

After the purely theoretical discussion about our project we are finally ready to tackle the most interesting topics. In fact, having determined definitively what entities will take part in the game we can start to prepare the environment and put all the resources that will be needed. I\u2019m referring to sprites, backgrounds and sounds. We will have also the opportunity to know in detail the editor that Game Maker makes available to handle sprites, animations, pictures, game parameters, and more.<\/p>\n

<\/span>The Game Maker environment<\/h2>\n

At first glance the environment seems to have none of the many features needed to build a complex and functional video game but as they say the appearance is deceptive. The image in Figure 1<\/strong> shows the appearance of the main window.<\/p>\n

\n
\"\"
Figure 1 \u2013 Game Maker\u2019s main window<\/figcaption><\/figure>\n<\/div>\n

We begin to see, then, the menu bar where we can find the classic menu called File. In the menu aside from functions for opening, saving, and compiling projects, is present the possibility to switch into the Advanced Mode. This unique feature allows the user to choose how to work with Game Maker: Advanced<\/strong> mode and Simple<\/strong>. The difference between the two consists in the set of features that can be used in the project.<\/p>\n

In Simple mode, in fact, you can\u2019t use functionalities related to fonts, to set default paths for objects or even create scripts in GML<\/strong>.<\/p>\n

A complete list of features found in the two modes of use is presented here:<\/p>\n

<\/span>Simple mode<\/h4>\n
    \n
  • Sprites<\/li>\n
  • Sounds<\/li>\n
  • Backgrounds<\/li>\n
  • Objects<\/li>\n
  • Rooms<\/li>\n<\/ul>\n

    <\/span>Advanced mode<\/h4>\n
      \n
    • Sprites<\/li>\n
    • Sounds<\/li>\n
    • Backgrounds<\/li>\n
    • Paths<\/li>\n
    • Scripts<\/li>\n
    • Fonts<\/li>\n
    • Timelines<\/li>\n
    • Objects<\/li>\n
    • Rooms<\/li>\n
    • Game information<\/li>\n
    • Global game settings<\/li>\n<\/ul>\n

      Proceeding further, we can find the Edit menu that allows us to perform operations on insertion, duplication, deletion, renaming and viewing properties. The Add menu simply allows you to create a new entity in one of the categories listed before1.<\/p>\n

      We find the Scripts menu, that is visible only in advanced mode, which allows us to perform certain operations over the script. Lastly we have: the Run menu which contains the function to launch a game in normal mode or in debug mode, the Window menu to organize windows on the screen and the Help menu where you can find a comprehensive reference about Game Maker.<\/p>\n

      The horizontal bar below there is a common use functions set selected from those menus<\/p>\n

      The vertical tree menu on the left side of the main window represents the focus of development in Game Maker. This, in fact, includes, among others, also most of the functionality offered by the before seen menu.<\/p>\n

      <\/span>Project preparation<\/h2>\n

      To start working you need to create a new project file by saving the state of an empty project, using the Save or Save As from the File menu.<\/p>\n

      It\u2019s good to specify that a Game Maker project file uses a convention for extension \u201c.GMX\u201d where X represents the version of Game Maker with which the project was created. So for version 6 projects will be created files with extension \u201cGM6\u201d.<\/p>\n

      When you add a resource (image, sound or script) that is inserted permanently into the project file. In this way unless you use external DLLs any executable will not depend on any other file.<\/p>\n

      Each EXE file produced by the \u2018Create Executable\u2019 function you can see in the menu File is, in fact, able to work alone even if distributed and runned on other computers where the environment has not been installed.<\/p>\n

      <\/span>Working with sprites<\/h2>\n

      We have already covered, in broad terms, the key role that sprites play in Game Maker, but for those who have not read the previous articles we can briefly say that a sprite is a picture or a series of images that appear on the screen in place of a character of the game or other entity.<\/p>\n

      To add a sprite to our project just click the right mouse button in the menu tree on the left, under Sprites. As you can see from Figure 2<\/strong> a pop-up menu will appear with active items: Add Sprite, Add Group and Sort by Name. The latter is used to sort items in ascending order by their name, the second to create a subfolder in the category while the first is to create a new sprite.<\/p>\n

      \n
      \"\"
      Figure 2 \u2013 Grouping sprites<\/figcaption><\/figure>\n<\/div>\n

      First we create two subfolders called Main Menu and Game, this to maintain a separation between items belonging to each module of the game, according to the conventions adopted in the analysis phase. Inside the Game you should create the following subfolders: Other, Asteroids, Bonus, Fonts, Enemy Ship, Shuttle. This operation will be conducted for all categories with which we work and, for brevity, I shall reserve to omit the steps during the discussion.<\/p>\n

      Clicking on the \u2018Other\u2019 folder and selecting \u2018Add Sprite\u2019 Game Maker will create a new item called spriteXX as shown in Figure 3<\/strong>, where XX stands for the number of sprites created in the project. At the same time it opens a window called \u2018Sprite Properties\u2019. This window is divided into three sections, one containing the buttons to create, edit sprites, containing a few parameters that we will soon and last for a preview.<\/p>\n

      \n
      \"\"
      Figure 3 \u2013 The sprite creation dialog<\/figcaption><\/figure>\n<\/div>\n

      In the \u2018Name\u2019 box, we enter the name \u2018sprController\u2019 and pressing the button \u2018Load Sprite\u2019 will appear the classic system dialog box through which you can upload an image. We choose the file from the project package \u201c[ProjectPath]\\AstroCrisis\\Graphics\\Sprite\\Other\\PC.ico\u201d<\/strong>. In the window we will make the appropriate changes to the sprite parameters. For example, width and Height entries show the size of the sprite and \u2018Number of subimages\u2019 indicates the number of frames by which it is made. Pressing the OK button all changes will be stored.<\/p>\n

      We will analyze now the most important features in the animated image creation. First we must add a new sprite to the \u2018Shuttle\u2019 project folder, but this time we must click on the button \u2018Edit Sprite\u2019. Will open an additional window, the Sprite Editor, about which we have often spoken. Figure 4<\/strong> shows the appearance of this window with its menus. This editor allows you to group several frames to create an animation. It can also create animations from a single image through the functions contained in the Animation menu as rotation, translation, scale and morph sequences.<\/p>\n

      \n
      \"\"
      Figure 4 \u2013 The sprite editor dialog<\/figcaption><\/figure>\n<\/div>\n

      In the \u2018Images\u2019 menu and \u2018Transform\u2019 there are several functions for editing a single frame by the application of colors effects and geometric transformations. The Edit menu contains classic functions as cut\/copy\/paste and some more to change frames position within the sequence.From the File menu, we can create, add and save single frames or entire sequences from external files.<\/p>\n

      It is interesting to observe how our sequences of frames are loaded in the form of files Strip which is nothing more than an image containing the animation framese. To do this, we select the File Create menu item from Strip, and load the file \u201c[ProjectPath]\\AstroCrisis\\Graphics\\Sprite\\Shuttle\\Shuttle_93x93_178_Strip\u201d<\/strong>. To avoid mistakes when decoding the file we have been added to the file some information relating to the size of one single frame (here\u2019s why the \u201993\u00d793\u2032 label) and the number of these so 178.<\/p>\n

      The dialog box that Game Maker opens after file selection is called \u2018Loading a strip image\u2019 makes it possible to decode the sequence chosen, by setting the correct parameters. The meaning of the boxes is rather straightforward as you can see through the image in Figure 5<\/strong>. We must specify the number of frames in the file, the number of rows by which they are organized and the size of each frame.
      \nTo ensure that the image is decoded correctly just make sure that all frames have been trimmed in the right places. After that you can confirm with the OK button and watch the just extracted frames.<\/p>\n

      \n
      \"\"
      Figure 5 \u2013 Loading stripped images<\/figcaption><\/figure>\n<\/div>\n

      Once we back at the Sprite Editor, we have to select the Show Preview box on the left to let the editor show us a preview. You have certainly noticed that the green color has disappeared, this happens because Game Maker allows to choose the color that should not be considered when drawing the sprite. The editor automatically chooses. as the transparent color, the value of first pixel in the lower left corner of the frame. A double click on a frame opens the Image Editor which lets you design and\/or modify the same, but we will se that in more detail during the next paragraph. Press now the button with the green check mark to return to the property, for reference see Figure 6<\/strong>.<\/p>\n

      \n
      \"\"
      Figure 6 \u2013 Each stripped image frame is converted in a new single image<\/figcaption><\/figure>\n<\/div>\n

      Now it\u2019s time to take care of the other parameters in this dialog. The checkbox labeled \u2018Transparent\u2019 indicates that the color choosen as transparent should not be drawn on the screen. The checkbox labeled \u2018Precise collision checking\u2019 is used to indicate the method to use for handling collisions. A collision is an event that is raised when the pixels in two images overlap. For each sprite is possible to define the area by which such collisions may take place. The panel called \u2018Bounding box\u2019 in the bottom serves to this purpose.<\/p>\n

      Handling a collision in terms of rectangular areas is much less expensive to process than the entire and precise contours of the sprite. The \u2018Precise collision checking\u2019 checkbox serves this purpose disabling the collision boundary to be limited to the Bounding Box.<\/p>\n

      The voice \u2018Smooth edges\u2019 allows us to limit the pixel effect of the image boundaries blurring them lightly. Preload Texture tells Game Maker to automatically load images into memory when you launch the program, disabling them will they be loaded only when really used. The last parameter that we will observe is the Origin panel that determines the image position. This means that when you specify the coordinates of the sprite its origin will coincide with those.<\/p>\n

      This sprite is called sprShuttle. The same procedure must be followed for all other Strip files contained in subdirectories of \u201c[ProjectPath]\\Graphics\\Sprite\\\u201d<\/strong>considering that each sub folder name corresponds to the respective in the project tree.<\/p>\n

      <\/span>Backgrounds<\/h2>\n

      A background is nothing but a still image used as a \u200b\u200bdecoration of the playing area. It is clear that there is not much to say about it, but simply that they can be loaded from external files or created using the Image Editor.<\/p>\n

      We add, therefore, a new background to the project in the category Backgrounds inside the Game folder. Is it obvious expecting that the Background properties window will appear, so the same things said for the sprites are valid except for the fact that pressing the button Edit Background the Image Editor is launched.<\/p>\n

      Developers that had previous experience with a common paint program such as Windows Paint will not have problems using this editor. As seen in Figure 7<\/strong>, are present the traditional tools for zooming images, drawing lines or filling shapes, choosing colors and making changes through the various items in the menu that are almost the same as in the Sprite Editor.<\/p>\n

      \n
      \"\"
      Figure 7 \u2013 The internal image editor tool<\/figcaption><\/figure>\n<\/div>\n

      Pressing the \u2018Load Background\u2019 we select the file in the folder \u201c[ProjectPath]\\Graphics\\Desktop\\Terra.png\u201d<\/strong>, the result of this operation is presented in Figure 8<\/strong>. This background must be called bgTerra, and checkbox below should remain unchanged. The same must be done with the file \u201c[ProjectPath]\\Graphics\\Desktop\\Terrab.png\u201d<\/strong> and this must be called bgMenu.<\/p>\n

      \n
      \"\"
      Figure 8 \u2013 The selected background image is loaded<\/figcaption><\/figure>\n<\/div>\n

      <\/span>Sounds<\/h2>\n

      At this point adding a sound to the project should be an automatic operation. So add the file \u201c[ProjectPath]\\sounds\\FuocoShuttle.wav\u201d<\/strong> and label it sndFuocoShuttle, simply by adding the \u2018snd\u2019 suffix to the filename.<\/p>\n

      Between the sounds properties we can find some interesting features, look at them in detail through the image in Figure 9<\/strong>. Starting from the top there are: the usual box containing the label associated to the sound, the Sound Load button to load a sound, the Save Sound button that serves to export to file a sound, and two buttons which serve respectively to listen a preview of selected sound and stopping the execution. Game Maker recognizes audio formats WAV, MP3 and MIDI.<\/p>\n

      \n
      \"\"
      Figure 9 \u2013 The sound settings dialog<\/figcaption><\/figure>\n<\/div>\n

      Just below we find the frame Kind through which is possible to define the use we make of the sound. The voice \u2018Normal Sound\u2019 must be set for those sounds used as special effects, of which can exist, ie, multiple instances simultaneously. Selecting \u2018Background Music\u2019 option this causes to run a single sound at time. The 3D Sound option allows us to project the sound in a 3D virtual environment and set, through the Game Maker scripting language, the spatial coordinates. The last item \u2018Use multimedia player\u2019 is used to play MP3 music files.<\/p>\n

      The boxes on the Effects panel allow us to apply effects to the sound such as echo, reverb, chorus etc.. For each sound then you can set their own volume level and balance between left and right channel.<\/p>\n

      To proceed you need to enter in all the project files in the folder \u201c[ProjectPath]\\sounds\\\u201d<\/strong> and add the suffix \u2018snd\u2019 to each.<\/p>\n

      <\/span>Rooms<\/h2>\n

      The rooms serve as a play area and is here that all objects \u201cexist\u201d, that can be used in any other project and, in each one, produce a different level of the game.<\/p>\n

      In our case it will serve only two: one called roomLivello and one roomMenu. Let\u2019s take a look, then, to the Room properties window that consists of four main folders called: Objects, Settings, Tiles, Backgrounds, Views, plus a grid on the right where the objects are placed. Everything is shown in Figure 10<\/strong>.<\/p>\n

      \n
      \"\"
      Figure 10 \u2013 The main game room<\/figcaption><\/figure>\n<\/div>\n

      We begin with the Objects folder. From here you can choose an object among those present in the project, create an instance clicking the left mouse button and position it as desired within the grid. Upon execution of the game, the objects will be created at the shown location.<\/p>\n

      In the same table there are some indications to use the editor. Below the \u2018Delete underlying\u2019 checkbox indicates whether an object should be deleted or not from the grid when it is instantiated another one on top of it. In the Table Settings there are the boxes for setting: the name of the room, the string to display as the caption of the window, the size of the playing area and the refresh rate expressed in frames per second<\/p>\n

      The \u2018Persistent\u2019 voice indicates whether instances of objects, in this room, must continue to exist through other rooms. For both rooms set \u201cAstroCrisis\u201d as a caption, 800 pixels wide, 600 pixels high, a refresh rate of 60 frames per second and the voice Persistent disabled.<\/p>\n

      The button \u2018Creation Code\u2019 is not important for our purposes because it allows you to specify a code in GML to run every time the room is displayed. We will create an object to which this task is delegated.<\/p>\n

      We ignore the \u2018Tiles\u2019 table, that is used to manage the backgrounds as a composition of many small images, and pass directly to the Backgrounds. Here we can decide if the background of the room is filled with a color or with one of the images in the project. The boxes, called X and Y indicate the position of the room, while \u2018Hor. Speed\u2019 \u200b\u200band \u2018Vert. Speed\u2019 \u200b\u200ballows you to animate the background making him move the indicated number of pixels at each frame. To the room roomLivello we have to set the background image bgTerra, for the other one we have to set bgMenu. In both cases the checkbox \u2018Visible When room starts\u2019 it must be selected.<\/p>\n

      Last and not least the table called Views. By setting up the parameters present here it is possible to make sure that an object will be followed in every movement and centered on the screen. When following also all the other objects will be moved creating a displacement within an area of \u200b\u200bgreater dimensions of the screen.<\/p>\n

      Each room has eight views available each with its own set of parameters and objects to be attached. Only for the room roomLivello we select the \u2018Enable the use of views\u2019, the view0 in the views list and the item \u2018Visible When the room starts\u2019 which indicates that the view will be activated as soon as you enter the room. The textboxes \u2018View in room\u2019 and \u2018Port on screen\u2019 must report the values \u200b\u200bX = 0, Y = 0, W = 800, H = 600. These settings are used to define the positions and dimensions of the view among the view port and the screen.<\/p>\n

      In \u2018Object following\u2019 we set the object to be followed while the pairs HBor, VBor and Hsp, Vsp, will represent the area within which that object can move without getting the view to move and the scrolling speed of that view among to the object. These settings will be carried out in the next article.<\/p>\n

      <\/span>Global settings<\/h2>\n

      In the tree menu on the main window we find the voice Global Game Settings. This allows us to access an area where you can set the general parameters that affect the entire project. You can customize many aspects of the game like the windowed or full screen mode, the video resolution, the loading bar, the constants, including files, error handling and information about the product version.<\/p>\n

      <\/span>Informations page<\/h2>\n

      As another facilitation Game Maker offers a simple mechanism for adding information about the game through a text editor accessible from Game Information section. This window can be displayed at any time during the execution of the game.<\/p>\n

      <\/span>Conclusions<\/h2>\n

      At this point we have prepared our project with all the resources necessary to implement the proposed game. In the next article, therefore, we will create the objects and realize their behavior through scripts in GML.<\/p>\n

      I recommend to all readers interested in the topic to write me and not to hesitate to ask any questions. Also give us the necessary help and advices for the realization of future articles.<\/p>\n

      <\/span>Bibliography<\/h2>\n
        \n
      1. Mark Overmars, \u201cDesigning Games with Game Maker\u201d, www.gamemaker.nl<\/li>\n<\/ol>\n

        <\/span>Original article<\/h2>\n