!!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. 

* [[#a1 | Displaying text]]
* [[#a2 | Animation]]
* [[#a3 | User interaction]]
* [[#a4 | Transparency]]
* [[#a5 | Sound]]

!!!! [[#a1]] 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:
Path:/images/tut2/pic1.png

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

Path:/images/tut2/pic2.png

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.

Path:/images/tut2/pic3.png

Return to the ZGameEditor window.

!!!! [[#a2]] 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.

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

!!!! [[#a3]] 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.

Path:/images/tut2/pic7.png

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.

!!!! [[#a4]] 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:
Path:/images/tut2/pic5.png

Press F9 to run the application. The text is now rendered with transparency.
Path:/images/tut2/pic6.png

Press Escape to return to the editor.

!!!! [[#a5]] 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: [[Path:/files/zzdc/HelloWorld.zip | HelloWorld.zip]].