How to create texts from sprites using a SpriteText Blackbox
This is the effect you can get by using SpriteText blackboxes. The SpriteText blackbox is one that belongs to the Sprites category that allows you to create dynamic text based on a font in which each character (or letter) is a Sprite animation.
You can get more information about the SpriteText blackbox from its API
Below, we’re going to lay out the steps to create a SpriteText in WiMi5.
GET AN IMAGE FILE OF THE FONT.
An image file that can be used as a SpriteText is nothing more than an image file that has all the characters (or letters) that are going to be used later.
You can search the web to find Sprite Fonts, or you can create them yourself.
In this tutorial, we’re going to use the free web service Leshy SpriteSheet Tool.
These tools are very useful to later determine the x and y positions, and the width and height of each character.
To make the process easier, and for learning purposes, it might be a good idea to make all the characters of equal width (in this case, 70 pixels), though that isn’t strictly necessary.
What is strictly necessary is that all the characters have the same height so that they can be vertically aligned.
Also, it’s important that the file be a .png image file with a transparent background so that it can be used later anywhere.
IMPORT AN IMAGE TO THE PROJECT
Go to the Scene Editor and click on the Add Images button in the Images panel so that it’ll open the Resource Manager.
The Resource Manager will allow you to add an image to your image repository. A repository is nothing more than a collection of objects; in this case, images.
All your images are managed by the Resource Manager, which is nothing more than an assistant to handle all the actions necessary to manage your repository.
You can create a new image, edit it, delete it, create a new folder, move images between folders, etc.
Once the Resource Manager is open, select the folder where you’d like to save the image and click the Upload button.
Select the image to upload and click Open.
The image will be uploaded to the server. Once that’s happened, select it and click on the Add to Project button to add it to the project.
The image will be available in the project from the Images panel.
CREATE A SPRITE FROM AN IMAGE
THERE ARE TWO WAYS TO CREATE A SPRITE FROM AN IMAGE:
DRAGGING THE IMAGE FROM THE IMAGES PANEL TO THE SPRITES PANEL
CLICKING ON THE ADD SPRITES BUTTON AND SELECTING THE IMAGE.
CREATING THE ANIMATIONS.
As we said before, a Sprite is nothing more than an image divided into frames (called “animations” at WiMi5).
In this case, our animations are going to be each of the characters and letters that our Sprite Font has.
The first time we create a Sprite, the editor will create a default animation called animation0. If you double click on it, you can change its name; let’s call it the name of the first character of our Sprite Font.
In this case, that would be the number 1:
DEFINING THEOFFSETX, OFFSETY, FRAMEHEIGHT, AND FRAMEWIDTH OF EACH ANIMATION.
Now we’re going to use the values the sprite sheets creators we discussed in panel 1 gave us.
In our case, the values for the character (animation) 1 are these:
offsetX: 0 (this would be the same value as TopX),which means there is no pixel from the leftmost point of the sprite to the point on the x axis where the “1” character begins.
offsetY: 0 (mapping the TopY value); as above, this means there are 0 pixels from the topmost position of the Sprite to the beginning of the character (animation) “1”.
frameWidth: 70 As we said before, to keep things simple, we’ve decided to make all the characters in this Sprite Font have the same width, 70 pixels. This is not necessary, but it makes creating the Sprite Font much easier.
frameHeight: 70. Remember that all the animations have to have the same height.
Keeping the new “1” animation selected, we can modify these values in the Properties panel situated in the upper right part of the scene.
We’ll leave the rest of the default values as they are.
CREATING THE REST OF THE CHARACTERS, ONE BY ONE.
For example, the character R would end up like this:
Warning! There are things to keep in mind when creating Sprite animation names:
There are certain text strings that cannot be used as Sprite animation names, such as:
- the dot character (“.”), which would have to be renamed “point”,
- the percentile character (“%”), which would have to be renamed “percentile”,
- the blank space character (“ “), which would have to be renamed “space”,
- the dollar sign character (“$”), which would have to be renamed “dollar”.
You can consult all the special characters in the API.
MOVING THE SPRITE TO THE SCENE.
Once we’ve finished the Sprite, we’ll drag it to the scene so that we can use it from the Logic Editor.
DRAGGING THE SPRITE TO THE SCENE
Once we’ve finished the Sprite, we’ll drag it to the scene so that we can use it with the Logic Editor.
As you can see in the animation above, we can select the default animation that we want for our Sprite from the Properties panel by having the Sprite selected in the Scene View.
Although it doesn’t matter which in this case, since we’re not going to see that Sprite because we want the texts to be created dynamically.
Precisely so that the Sprite we’re using as the Sprite Font isn’t visible, we’re going to give it an x value of -1000 (or any value that will get it outside the limits of the scene).
If you prefer, we could also make it invisible in the properties panel, or anchor it to an invisible layer. Both actions would have the same effect: the Sprite would disappear from our view but we’d be able to access it from the Logic Editor since the Sprite is used as a reference in this case.
And that would be all that is necessary to create the basic Sprite you’d need to be used as a Sprite Font from the Scene Editor.
If you need more help on how to use Sprites, you can visit this tutorial.
Now let’s go to the Logic Editor!
DRAGGING THE SPRITETEXT BLACKBOX TO THE LOGIC EDITOR
The SpriteText blackbox is the box that allows you to manage the logic associated with the text we want to show.
To create it:
DRAG A SPRITETEXT BLACKBOX TO THE SCENE.
SELECT THE TEXT SPRITE YOU WANT TO USE.
In our case, this is the Sprite called tipografia_70x70, and we can find it and drag it from the AssetManager Panel at the right of the scene.
To select this Sprite as the Sprite to use from the blackbox, simply select it from the Asset Manager Panel and drag it to inside the sprite text parameter of the blackbox.
INSERT THE TEXT YOU WANT DISPLAYED
Quickly double click on the SpriteText blackbox’s text parameter to add a new text type parameter (string).
Once created, select it, and in the properties panel that pops out of the left of the scene, modify the content property of the parameter.
The text that we’ll add here will be the text that will be displayed later in the project.
For this tutorial, let’s write “Text to be shown”.
ADD A PARENT OBJECT ABOVE SO THAT THIS SPRITETEXT CAN BE BELOW IT
Now that we’ve reached this point, we have to select a parent object to anchor this new text we’re going to create.
Since we haven’t created any parent object in the Scene Editor, let’s do that now:
CREATE THE PARENT OBJECT IN THE SCENE EDITOR
Let’s go back to the Scene Editor:
Create a new Object2D in the scene
This Object2D type object will be the container for the text. We’ll call it spriteFontContainer.
We can modify its properties so that the text is centered.
Let’s go back to the Logic Editor
ASSIGN SPRITEFONTCONTAINER AS THE PARENT FOR SPRITETEXT
CONNECT THE BLACKBOX TO THE GAMESTARTED CONNECTOR
MODIFY THE SPRITETEXT BLACKBOX’S PROPERTIES
If we press Play in the Preview panel, we’ll see that the text displays correctly, but it’s too big to be seen in its entirety.
There are two ways to solve this problem.
EDIT THE SPRITETEXT PROPERTIES TO SET A MAXIMUM WIDTH:
If you want more information about what the properties of the SpriteText mean, take a look at its API.25/10/2016 / 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