path: root/doc/tutorial/01 Getting Started.lyx

#LyX 1.6.5 created this file. For more info see http://www.lyx.org/
\lyxformat 345
\begin_document
\begin_header
\textclass article
\use_default_options true
\language english
\inputencoding auto
\font_roman default
\font_sans default
\font_typewriter default
\font_default_family default
\font_sc false
\font_osf false
\font_sf_scale 100
\font_tt_scale 100

\graphics default
\paperfontsize default
\use_hyperref false
\papersize default
\use_geometry false
\use_amsmath 1
\use_esint 1
\cite_engine basic
\use_bibtopic false
\paperorientation portrait
\secnumdepth 3
\tocdepth 3
\paragraph_separation indent
\defskip medskip
\quotes_language english
\papercolumns 1
\papersides 1
\paperpagestyle default
\tracking_changes false
\output_changes false
\author "" 
\author "" 
\end_header

\begin_body

\begin_layout Title
01.
 Getting Started with Godot Engine
\end_layout

\begin_layout Section*
Introduction:
\end_layout

\begin_layout Standard
Godot Engine is designed to be useful.
 This may sound rather vague and is difficult to explain without repeating
 the same claims that every other engine does, but, as we progress through
 this (and the next) tutorials, hopefully it will be made clear what 
\begin_inset Quotes eld
\end_inset

useful
\begin_inset Quotes erd
\end_inset

 means.
\end_layout

\begin_layout Standard
Godot Engine has many components, both high and low level, and is usually
 more abstract and complex than most other engines.
 This is, however, to the advantage of the user as complexity is presented
 in a way that it only needs to be discovered when more power needs to be
 untapped.
 This helps to provide an easy learning curve.
\end_layout

\begin_layout Standard
Design wise, the whole API and set of components were created with a clear
 goal in mind, which is to allow for smooth integration of design ideas,
 code and assets.
 This is achieved by defining the following rules:
\end_layout

\begin_layout Itemize
Implementing a game feature should never be too many steps away from an
 existing component.
\end_layout

\begin_layout Itemize
More complex features should be leveraged by combining or extending existing
 components.
\end_layout

\begin_layout Itemize
If the above fails, creating custom components should be extremely simple.
\end_layout

\begin_layout Standard
Ultimately, Godot Engine provides an editor and tools that allows everyone
 to work with it:
\end_layout

\begin_layout Itemize
Programmers can script and extend any component of the project.
\end_layout

\begin_layout Itemize
Designers can tweak and animate any parameter from a friendly user interface.
\end_layout

\begin_layout Itemize
Artists can import their art and models and tweak the look of everything
 in realtime.
\end_layout

\begin_layout Section*
Editor:
\end_layout

\begin_layout Standard
As mentioned before, Godot Engine is very abstract so projects consist of
 just a 
\emph on
path
\emph default
 (ie: C:
\backslash
games
\backslash
mygame5).
 Projects don't have to be specifically created, and many can be placed
 inside the same path (useful for not wasting folders on tests and experiments).
 
\end_layout

\begin_layout Standard
In any case, to ease the management of projects, a graphical util exists.
\end_layout

\begin_layout Subsection*
Running From The Project Manager
\end_layout

\begin_layout Standard
Godot Engine includes a built-in project manager.
 This is installed by default on Windows and OSX and it allows for the creation
 and removal projects that will be remembered at the next startup:
\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename pm.png

\end_inset


\end_layout

\begin_layout Standard
To create a new project, the [Create] button must be pressed and a dialog
 will appear, prompting for a path and project name.
 Afterwards, the [Open] button will close the project manager and open the
 desired project.
\end_layout

\begin_layout Subsection*
Running From the Command Line
\end_layout

\begin_layout Standard
To create and manage projects, it is perfectly possible to use the command
 line.
 Many users prefer this way of working with project data.
\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename pmc.png

\end_inset


\end_layout

\begin_layout Standard
For ease of use, it is recommended that the 
\begin_inset Quotes eld
\end_inset

godot
\begin_inset Quotes erd
\end_inset

 binary exists in the path, so any project can be opened easily aywhere
 just by changing location to the projec and executing the editor.
\end_layout

\begin_layout Subsection*
Godot Editor
\end_layout

\begin_layout Standard
Godot Editor should have been opened by now, if not please check the previous
 steps again.
\end_layout

\begin_layout Standard
Godot has a powerful buit-in editor.
 It uses the graphics toolkint within itself to display the UI, so it runs
 identical on any platform (even consoles or phones!).
\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename editor.png

\end_inset


\end_layout

\begin_layout Standard
In the above screenshots, a few regions are labelled to be explained as
 follows:
\end_layout

\begin_layout Subsubsection*
Viewport
\end_layout

\begin_layout Standard
The 
\emph on
Viewport
\emph default
 is the main space where the content is displayed.
 Content includes 3D Nodes or Graphical User Interface (GUI) controls.
 Other types of data spawn editors of their own when being edited.
 The default viewport is the 3D viewport, which can be panned, zoomed, etc.
\end_layout

\begin_layout Subsubsection*
Scene Tree
\end_layout

\begin_layout Standard
The 
\emph on
Scene Tree
\emph default
 is a small dock that displays the tree of the current scene being edited.
 A scene is a collection of nodes arranged in a tree-hierarchy (any node
 can have several owned children-nodes).
 The meaning of this ownership depends purely on the 
\emph on
type
\emph default
 of the node, but it will become clear after going through the examples.
 In a 
\emph on
MVC
\emph default
 pattern, the scene tree could be considered the 
\emph on
View
\emph default
.
\end_layout

\begin_layout Subsubsection*
Property Editor
\end_layout

\begin_layout Standard
The 
\emph on
Property Editor
\emph default
 is another small dock.
 Every node contains a finite number of 
\emph on
properties
\emph default
, which can be edited.
 Properties can be of several types, such as integers, strings, images,
 matrices, etc.
 Usually, changes to properties are reflected in the 
\emph on
viewport
\emph default
 in real time.
\end_layout

\begin_layout Section*
Examples:
\end_layout

\begin_layout Standard
From now, a few, simple examples will be presented that will help understand
 a little better how Godot Engine works.
 
\end_layout

\begin_layout Subsubsection*
Hello, World!
\end_layout

\begin_layout Enumerate
Open the editor
\end_layout

\begin_layout Enumerate
Click on 
\begin_inset Quotes eld
\end_inset

Node
\begin_inset Quotes erd
\end_inset

 (Node Menu), then on 
\begin_inset Quotes eld
\end_inset

Create Root
\begin_inset Quotes erd
\end_inset


\end_layout

\begin_deeper
\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_1.png

\end_inset


\end_layout

\end_deeper
\begin_layout Enumerate
Create a node of type 
\emph on
Label, 
\emph default
then instruct the 
\emph on
editor 
\emph default
to switch to GUI editing mode.
 A few red squares will appear on the top left corner, don't mind them yet.
\end_layout

\begin_deeper
\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_2.png

\end_inset


\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_2b.png

\end_inset


\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_3c.png

\end_inset


\end_layout

\end_deeper
\begin_layout Enumerate
Select the 
\emph on
Label 
\emph default
node in the 
\emph on
Scene Tree
\emph default
 (if it's not selected yet), the properties of the selected node will appear
 in the 
\emph on
Property Editor
\end_layout

\begin_deeper
\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_3a.png

\end_inset


\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_3b.png

\end_inset


\end_layout

\end_deeper
\begin_layout Enumerate
Look for the 
\emph on
Text
\emph default
 property in the 
\emph on
Property Editor
\emph default
 and click the right column, so it becomes editable.
 Enter the text 
\begin_inset Quotes eld
\end_inset

Hello, World!
\begin_inset Quotes erd
\end_inset

.
 A red square containing 
\begin_inset Quotes eld
\end_inset

Hello World!
\begin_inset Quotes erd
\end_inset

 will appear at the top left, move it to the center.
\end_layout

\begin_deeper
\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_4a.png

\end_inset


\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_4b.png

\end_inset


\end_layout

\end_deeper
\begin_layout Enumerate
Save the scene.
\end_layout

\begin_deeper
\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_5a.png

\end_inset


\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_5b.png

\end_inset


\end_layout

\end_deeper
\begin_layout Enumerate
Press PLAY.
 A new window will appear running the application.
\end_layout

\begin_deeper
\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_6.png

\end_inset


\end_layout

\begin_layout Standard
\align center
\begin_inset Graphics
	filename tute1_7.png

\end_inset


\end_layout

\end_deeper
\begin_layout Subsubsection*
Hello World 2 (a little more complex)
\end_layout

\begin_layout Subsubsection*
A 3D Cube in Space
\end_layout

\begin_layout Standard

\end_layout

\begin_layout Standard
In many cases, nodes and other types of engine objects need to express changes
 in their state, such as a button being pressed, a scroll being dragged,
 or a projectile colliding against a tank.
 Godot Engine utilizes the concept of signals for this.
 Different types of nodes and objects can emit signals, and any other node
 or object can connect to them.
 
\end_layout

\end_body
\end_document