How to easily adapt WiMi5 game templates to create your own games
WiMi5 offers several game templates and other tools from which you can start your new HTML5 project. In this tutorial, we’re going to show you how you can change the graphics of one of these templates in order to personalize the game with your own graphics and thus have your own game.
To do this, we’re going to modify the template to the game WiMi Bird, which, as you can imagine, is a clone of the famous game Flappy Bird. We’re going to use some graphics that have the same size and characteristics of the originals, which is the easiest way to alter a game template.
The first step is to create a new project based on that template. To do this, log in to WiMi5 and go straight to the Dashboard. There, you’ll see all your projects and a button called Create New Game. When you click on this button, you’ll see the different options, basically, creating a new game from scratch or using an existing template. Pick the “WiMi5 Bird” template, which is at the end of the list.
When you create a project, you’ll be presented with the project’s settings, where you can configure several of its characteristics, as well as manage its Virtual Goods, statistics, or shops where the project can be published. Let’s go straight to the editor to change up the game.
When you access the project, first you’ll see the Logic Editor window, where you can check out the logic created for this game with visual scripting. Clicking on the “Scene Editor” option from the “Desktop” menu will take you to the Scene Editor, where you can change the game’s graphics.
But before starting to change up the images, you need to know the characteristics of the originals, especially their size. To find out, you need to use the debugging tool that comes with most modern browsers. We’re using Chrome in this case.
This first step is to run the original game in the browser. To do this, you need to deploy the project and run a test to find a public URL you can access with your browser. So go back to the Logic Editor and in the “Tools” menu, pick “Deploy” and then “Test”. Now you have a URL where you can see the original game.
To see the graphics that are being used in the game, open up development tools in “View > Developer > Development Tools” in Chrome for Mac or “Menu > More Tools > Developer Tools” in Chrome for Windows. This way, you can see the game’s source code, as well as other options.
One of the simplest ways to see the graphics that are being used is to click on the “Resources” tab under the “Development Tools” panel. In this tab, you can see the resources the game uses. Click on the folder (games.wimi5.com) and then on “Images” to display all the images used by that HTML5 game. If you select any of the displayed images, you’ll see the details of that image in the panel on the right: dimensions, size, MIME type, and URL. With that information, you can create your own images keeping in mind the dimensions of the original game’s.
Now that you have your image pack ready for the new game, it’s time to upload them to the cloud storage in your WiMi5 account. So go back to the Scene Editor and click on the folder icon of the “Resource Manager” panel. In the window that opens, create a folder (“New Flappy”, for example) to upload your new image pack. Afterwards, select them to use them in your new game.
In the Scene Editor, all you have to do is simply replace the old images with the new ones. So, select any image you like, like the game’s title, for example. In the “Properties” panel, there is a property called “image” which is what determines what images are used for this resource. If you click on the drop-down menu at the right, you can choose the image you want to use and it will automatically appear in the “Scene View”. If you “deploy” and “test” in the Logic Editor, you can see that the game now has new images.
Now it’s just repeating the process with all the images you want to change. Now, we’re going to look at how to replace Sprites, since the process is slightly different.
In the case of a sprite, you have to change the graphics directly in the “Sprite Defs” panel. For example, if you want to the “redFlappy” sprite, click on it and you’ll see that in the “Properties” tab, you can choose the reference image. Simply by choosing the new image in the drop-down menu, a new animation will appear in the “Scene View” panel. To do this, you’ll have had to keep the size of each frame defined in the original. If the new animation were somehow different, you’d have to adjust the values of that animation within the properties of the animation in the panel “SpriteDefs”; in this example, the animation “right”.
And with that, we’ve explained the steps needed to modify and personalize a WiMi5 game template. As you can see, the process is fairly easy, so we encourage you all to personalize and create your own projects. Remember that publishing these games is also very easy—just check out the tutorial on publishing or the videotutorial that explains the process.02/07/2015 / No Comments
- How to Integrate a Game into Your Website
- How to integrate a WiMi5 game in Moodle
- How to create texts from sprites using a SpriteText Blackbox
- How to clone a project
- New ways of interacting in wimi5
- How to easily adapt WiMi5 game templates to create your own games
- How to monetize your games using Virtual Goods
- How to use the CodeRunner blackbox
- How to use Game Session Storage
- How to Use Rankings
- How to publish your HTML5 game to other game platforms
- How to publish your HTML5 game on the Google Chrome Web Store
- How to set up game levels based on data from a text file: using the ParamMap.
- How to create a scoreboard for lives, time, and points
- How to Make a Scroll and a Parallax Scroll in 2D Games
- How to create collisions
- How to debug in WiMi5