• View
• Edit
• History
• Print

Tutorial2

Tutorial 2: The "Hello World" application

This tutorial will guide you through making the "Hello World" application, which is simply a program that displays the text "Hello World" on the screen.

• Displaying text
• Animation
• User interaction
• Transparency
• Sound

Displaying text

Here is how we will begin:

• Start ZGameEditor.
• To start a new project: Select File - New project.

You will now have a blank project with a single ZApplication-component in the component tree.

• Click on the OnRender-node in the tree.

This is the command list that is executed each time the application will be rendered (displayed) on the screen.

Now add a RenderText-component to the OnRender-node, by following these steps:

• Click on the '+' icon in the toolbar
• (or press Ctrl-A)
• (or right click and select Add Component from the popup menu.)
• Select RenderText from the select component dialog.
• Click OK to close the dialog
• (or double click the RenderText component)
• In the property editor, click the edit-box next to the label marked "Text".
• Type HELLO WORLD
• Press "Tab" to exit the edit box and commit the value

Now save your project:

• Save your project by clicking on the save-icon in the toolbar, or by selecting File - Save Project from the menu.
• Name your project "HelloWorld"

This is how it should look on your screen now:

Now run the project by pressing F9-button, or selecting the Run-icon in the toolbar. This is what you will see:

Press Escape to quit the HelloWorld program and return to the editor.

Open a Windows Explorer window and look into the folder where you saved your project. You will find the program "HelloWorld.exe". This was created when you selected the "Run" action. Try starting it if you like. The program is independent from ZGameEditor and can be executed on any Windows computer with OpenGL support.

Wait, why is the file larger than 64kb? This is because when you run a game from inside the tool (using F9), they are uncompressed. The size is around 100kb before compression. When you select "Build release" from the menu you will get a small exe-file (thanks to upx-compressor external tool).

Return to the ZGameEditor window.

Animation

Now we will add some simple animation.

• Give the RenderText component a name by setting the Name property to MyText.
• Click on the OnUpdate-node.
• Add a AnimatorSimple-component (Ctrl-A, select AnimatorSimple).
• Set the following properties on AnimatorSimple:
  • Duration = 2
  • AutoStart = checked
  • Target = MyText.Y
  • FromValue = -0.5
  • ToValue = 0.5
  • Smooth = check
  • AutoReverse = check
  • RepeatCount = 100

We have created an animator that will smoothly animate the value of our RenderText-components "Y"-property from -0.5 to 0.5. The coordinate system for text is in the range -1 to 1 with 0 being center.

Run the application. The text should now smoothly move up and down. Press Escape to return to the editor.

User interaction

Time to add some interactivity.

• Select the RenderText-component again
• Make the text slightly larger by setting Scale to 1.5
• Click on the edit-box next to the label RenderCharExpression.
• The expression text editor will appear. You can make the editor larger by click and drag the borders with the mouse.
• Click the expression text editor
• Add a new line after the lines that start with "//" (comments).
• Type "CharY=1 + sin(App.MousePosition.Y*CharI);"
• Click the "OK"-button.

The expression will assign a separate "Y"-value (vertical position) for each letter in the displayed text. The position is dependent on the position of the mouse.

Run the application by pressing F9.

When you move the mouse up and down the letters follows the mouse.

Adding transparency

You will notice there are ugly borders where the characters overlap. This is because by default graphics in ZGameEditor are not drawn with transparency. Here are the steps to fix that.

Add a Material-component:

• Click the Content-node in the component tree.
• Add a Material-component (Ctrl-A, select Material).
• Set the following properties on Material:
  • Name = TextMaterial
  • Blend = Alpha/OneMinusSourceAlpha

Add a component that will use the material:

• Click the OnRender-node in the component tree.
• Add a UseMaterial-component (Ctrl-A, select UseMaterial).
• Set the following properties on UseMaterial:
  • Material = TextMaterial (select from the dropdown menu)
• Click the "Move up"-icon (up arrow) in the toolbar, or right click and select "Move up" from the menu. This will move the UseMaterial component before RenderText.

The component tree should now look something like this:

Press F9 to run the application. The text is now rendered with transparency.

Press Escape to return to the editor.

Sound

Just for fun, we will now add a simple sound effect.

Create the sound component:

• Click the Content-node in the component tree.
• Add a Sound-component (Ctrl-A, select Sound).
• Set the following properties on Sound:
  • Name = MySound
  • Length = 0.2
  • UseFilter = check
  • FilterQ = 0.7

Next, add components that will play our sound.

• Click the OnUpdate-node in the component tree.
• Add a PlaySound-component (Ctrl-A, select PlaySound).
• Set the following properties on PlaySound:
  • Sound = MySound
  • ReplayDelay = 0.25

And an expression to change the sound over time:

• Add a ZExpression-component (Ctrl-A, select ZExpression).
• In the expression custom editor, type:

MySound.BaseNoteNr=24+frac(App.Time)*18;
MySound.FilterCutoff = 0.5 + App.MousePosition.X*0.48;

• Click OK

Press F9 to run the application. You will now here a sound playing. When you move the mouse in the horizontal axis the sound will be sharper or more muted. This is because the expression assigns a value to the sound filter depending on the position of the mouse.

That was it! Your first application using ZGameEditor.

The tutorial source file can be downloaded here: HelloWorld.zip.