The sprite manager
In this tutorial we show you how to use the sprite manager to control our texture packages at each level. Allowing to import and export data packages.
1.0 – Summary
The image manager is made up of a four-button initial menu. We will access this menu by pressing the virtual button located in the general panel on our left. From this moment we can visualize the different image formats that GameMaker Studio offers us, such as JPEG, Png, gif, swf and the Spine files.
Once we have created assets for our level, we will have the possibility to export our structure in JSON format. This will give us great advantages such as being able to import the structure on another level or share this texture package with a group of users.
1.1 – Adding a folder
Nuestro menú de imágenes comienza completamente vacío. Es el momento de agregar una carpeta pulsando el botón virtual ADD FOLDER y dar un nombre a nuestro directorio. Podremos repetir este proceso las veces que sean necesarias para obtener una estructura de directorios y así tener correctamente clasificados nuestros activos.
Once the folder is created, we can see its name in the asset bar, where the images that we insert in it will be stacked. On each side of the asset bar there are two navigation buttons that are used to navigate between the different folders we have created.
1.2 – Adding sprites
Now that we have created a folder, it is time to add an image of our GameMaker Studio assets. Clicking on the ADD SPRITE virtual button will appear a text box where we are invited to insert the name of our file to add.
Bearing in mind that we are adding assets in the same folder, it is highly recommended that we classify our files by format, such as Png files for one directory, Spine for another, textures that we will use for 3D, etc.
In the image below we show you an example of how to correctly group our assets. If our asset contains more than one image (representing an animation), these will be displayed on the display panel to the right of the navigation bar.
If an asset contains a Spine file and it stores different animations, the display panel will show us the animation gallery responsively. Adjusting this automatically to the size of your screen (or your window if we are in full screen mode).
1.3 – Exporting the texture pack
Once we have finished adding our folders and images, we will have the possibility to export our asset package by pressing the virutal EXPORT TREE button. This function will help us to load it on another level when necessary and not have to repeat the structuring process.
If we add more assets and then import our structure with the same title, the existing texture package will be overwritten by its current status. These packages will be located in the TEXTURE PACKS folder of our working directory (usually located in the App Data folder on the Windows operating system).
When exporting our texture package we will be notified, by means of an informative message located in the upper right, that our personalized library has been exported correctly.
As we have said before, if there is a file with the same name in our TEXTURE PACKS folder of our GameMaker working directory, we will receive a warning that an asset with the same name already exists. This notice will give us the option to cancel the process or overwrite the existing file.
1.4 – Importing our texture pack
We already have a texture pack! From this moment, when we want to create a new level, or simply want to replace the existing texture package, we can access to choose our panel by pressing the virtual button IMPORT TREE.
If our asset exists, we receive an information message informing us that the import was successful. Otherwise, if the asset does not exist among our files, we will be equally informed of it.
A note to keep in mind is that our levels already store an independent structure of our assets and it will not be necessary to load our texture package. This process will be executed automatically by our editor.
Exporting packages has the sole purpose of streamlining the workflow if we want to make changes at our levels. In other words, loading levels does not access the texture folder, since this information is included in the file that contains our level.
1.5 – Deleting assets
Deleting assets is very simple, simply by pressing the virtual button to the right of the image title, it will be deleted from the list. If we want to access that image again we will have to retype its name with the virtual ADD SPRITE button.
We can remove all assets from a folder, and it will continue to exist. If our intention is to delete the folder completely from our panel, we simply have to press the virtual button of the FOLDER, saving us the process of deleting the assets of a directory one by one.
As you can see, to the left of the mentioned button, we enter another virtual key called NO SPRITE, this key has the function assigning a default in-game icon image to the object that we are going to create in our scenario.
In later paragraphs we will show you more information about the METHODS that DarkSpine uses to edit each section of our scenario.
If our intention was not to eliminate a certain asset or you simply remembered that you already had one, it will be enough to import our texture package again or assign a different one depending on what we want.
1.6 – Assigning sprites to objects
Es bueno que ya conozcas como funciona DarkSpine. El editor emplea MODOS de funcionamiento, en el cual el modo CREATE se encarga de generar nuevos objetos a nuestro escenario, gestionar la configuración inicial de nuestro escenario, guardado y carga de nuestros niveles y otras funciones que iremos viendo a lo largo de esta serie de tutoriales.
Cuando nuestro panel principal es de color AZUL, nos encontramos en el modo CREATE. Como vemos en la imagen de arriba, al acceder a nuestro panel y haciendo CLICK IZQUIERDO sobre el titulo de una textura o tocando la propia imagen, esta se asignará sobre el creador de objetos.
En la imagen de abajo podemos observar que hemos situado un objeto en el escenario. Siendo la imagen traslucida, situada en el puntero de nuestro ratón, la mano de dios que crea nuestro contenido.
Situar un objeto en el escenario se hace de la misma manera, pulsando el botón izquierdo de nuestro ratón. Pero tenga en cuenta que la creación de objetos se consigue cerrando cualquier panel que haya abierto pulsando la tecla ESPACIO de nuestro teclado, o tocando el botón virtual que cierra nuestro panel.
1.7 Editando la imagen de un objeto
If our secondary panels are closed and we press the SPACE key on our keyboard again, we will be taken to EDIT mode (presenting the orange buttons). As the name implies, in this way we can edit our objects. In this tutorial we focus solely on the edition of our Sprite (image / texture) in that mode.
By clicking on the RIGHT CLICK of our mouse, we can select an object from our scenario (everything related to selection of objects or visual tools is done in most cases by pressing the same key).
In DarkSpine all objects have a variable that controls the speed of the animations. By default, our object creator assigns a value of 0 to that variable, therefore the initial configuration drawn on the screen of a positioned object is static. If our asset is an animation of PNG sequences and this value is 0, pressing the A and D keys will change the frame of our animation.
If we are facing an object that has an animation speed greater than 0 and this asset contains more than one animation, pressing the same keys mentioned will cause the object to change animation.
If our folder contains more than one asset, pressing the shortcut keys W and S will navigate between the different files in our directory. This is another way to access your assets without having to open the panel.
In the image above, we see that the marked asset is a sequence of Png images. Whenever we are faced with this type of sequence (which will be the most used by users), we will see its frames broken down into the visual panel. Being able to choose any frame to modify our object.
This image representing a tree is a Spine asset. These assets are animations created with a bone system, where images are stored in nodes among other functions.
In the edit mode, an asset can be transformed, and any part of our scenario can be scaled, rotated and moved in its 3 axes, X, Y and Z. This is achieved by pressing the shortcut keys E, R and T respectively or by clicking on the virtual buttons located in the main panel.
We strongly recommend that you view the video located at the beginning of this article to get a clear idea of this section.
The video tutorials provided on the YouTube channel support subtitle contributions from users. This means that any user can contribute to add subtitles with the editor and the new contribution program of YouTube subscribers.
And here is today’s lesson, test these lessons and do not forget that this adventure continues … You can access the following tutorials in the links below. Best regards GameMakers!