<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  version="2.0">
  <channel>
    <title>Sarah Says</title>
    <atom:link
      href="https://docs.microsoft.com/archive/blogs/sarahsays/feed.xml"
      rel="self"
      type="application/rss+xml" />
    <link>https://docs.microsoft.com/archive/blogs/sarahsays/feed.xml</link>
    <description />
    <lastBuildDate>Wed, 17 Apr 2019 03:25:59 GMT</lastBuildDate>
    <language>en-US</language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <item>
      <title>Creating New Power BI Custom Visuals</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/creating-new-power-bi-custom-visuals</link>
      <pubDate>Tue, 22 May 2018 18:38:36 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=1645</guid>
      <description><![CDATA[Step 0
The first step of the process is to install the Power BI Custom Visual Tool globally on your...]]></description>
      <content:encoded><![CDATA[<h1>Step 0</h1>
The first step of the process is to install the <strong>Power BI Custom Visual Tool</strong> globally on your development machine. To do so, you need <span><a href="https://nodejs.org">Node JS</a></span> and NPM version 5.0 or later.
Our second step will involve generating a localhost certificate, which will be located in your dev machine’s global NPM Node Modules folder.
Check to make sure you have Node installed:
<strong>Open</strong> a Command Line Interface (CLI) terminal, like Windows PowerShell or Command Prompt, and type:
<pre>node --version
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f1.png" alt="" width="627" height="277" class="aligncenter size-full wp-image-1655" /></pre>
<h1>Step 1</h1>
Open any Command Line Interface (CLI) terminal, like Windows PowerShell or Command Prompt (CMD), and
<strong>install</strong> the <strong>Power BI Custom Visual Tool</strong> by typing this command:
<pre>npm install -g powerbi-visuals-tools</pre>
This command can be run anywhere in the CLI, so any default command path is fine.
<pre><img src="https://msdnshared.blob.core.windows.net/media/2018/05/f2.png" alt="" width="627" height="99" class="aligncenter size-full wp-image-1665" /></pre>
If your install freezes or times out when installing "powerbi-visuals-tools," make sure "npm config proxy" is set up correctly.

Press “Ctrl + C” to terminate a frozen installation, then try running these commands one at a time, replacing “company” with your own company:
<pre> <span>npm config set proxy <a href="http://proxy.company.com:8080/">http://proxy.company.com:8080</a>
 npm config set https-proxy <a href="http://proxy.company.com:8080/">http://proxy.company.com:8080</a></span></pre>
<pre><img src="https://msdnshared.blob.core.windows.net/media/2018/05/f3.png" alt="" width="605" height="334" class="aligncenter size-full wp-image-1675" /></pre>
<strong>Run this command</strong>, which should display the help screen, to confirm it was installed correctly:
<pre>pbiviz</pre>
<pre><img src="https://msdnshared.blob.core.windows.net/media/2018/05/f4.png" alt="" width="589" height="877" class="aligncenter size-full wp-image-1685" /></pre>
<h1>Step 2</h1>
To access your visual through Power BI, you need to add a trusted certificate for localhost. This will allow Power BI to load the visual assets in your browser without a security warning.

<em>Note: Windows <strong>7</strong> does not have OpenSSL by default. </em>

OpenSSL must be installed to create the "<span>pbiviz --create-certs"</span><span> </span>certifications. One way to install OpenSSL manually on earlier versions of Windows is to install Cygwin. OpenSSL is installed natively on the latest version of Windows 10. Windows 7 users will need to install Cygwin (<a href="https://cygwin.com/install.html">cygwin.com/install.html</a>) to work around it. <strong>Use Cygwin INSTEAD of PowerShell or CMD</strong>.
On Windows 10, <strong>run the creation command</strong>:
<pre>pbiviz --create-cert</pre>
<pre><img src="https://msdnshared.blob.core.windows.net/media/2018/05/f5.png" alt="" width="565" height="162" class="aligncenter size-full wp-image-1695" /></pre>
An example location on a Windows PC of this certificate may generate in:
<pre>C:\Users\YourUserName\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\certs\PowerBICustomVisualTest_public.pfx.</pre>
You will also be given a 15-digit passphrase.

Next, <strong>run the installation command</strong>:

pbiviz --install-cert

Use the passphrase given to you to install the PFX certificate using the installation wizard.
<pre><img src="https://msdnshared.blob.core.windows.net/media/2018/05/f6.png" alt="" width="567" height="673" class="aligncenter size-full wp-image-1705" /></pre>
<h1>Step 3</h1>
Installation wizard:
<ul>
 	<li>Select <strong>Current User</strong> and click Next</li>
</ul>
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f7.png" alt="" width="549" height="530" class="aligncenter size-full wp-image-1715" />

<strong>Type</strong> the 15-digit password for the private key:

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f8.png" alt="" width="549" height="530" class="aligncenter size-full wp-image-1725" /> <img src="https://msdnshared.blob.core.windows.net/media/2018/05/f9.png" alt="" width="549" height="530" class="aligncenter size-full wp-image-1735" />
<ul>
 	<li>Select <strong>Place all certificates in the following store</strong></li>
 	<li>Click <strong>Browse</strong>...</li>
</ul>
You should see this dialog:

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f10.png" alt="" width="295" height="270" class="aligncenter size-full wp-image-1745" />
<ul>
 	<li>Select <strong>Trusted Root Certification Authorities</strong></li>
 	<li>Click OK</li>
 	<li>Click Next <em>(previous screen)</em></li>
</ul>
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f11.png" alt="" width="549" height="530" class="aligncenter size-full wp-image-1755" />
<ul>
 	<li>Click <strong>Finish</strong></li>
</ul>
You will then see this security warning:

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f12.png" alt="" width="427" height="387" class="aligncenter size-full wp-image-1765" /> <img src="https://msdnshared.blob.core.windows.net/media/2018/05/f13.png" alt="" width="244" height="159" class="aligncenter size-full wp-image-1775" />
<ul>
 	<li>Click <strong>Yes</strong></li>
</ul>
Once this is done, your browser will trust this certificate for connections to localhost, which will allow you to serve visuals. You will need to close all open web browsers before changes will take effect.
<h1>Step 4</h1>
<h2>Creating a new visual</h2>
You can <strong>create a new visual project</strong> with a single command (Replace "MyVisualName" with the name of your visual):
<pre>pbiviz new MyVisualName</pre>
You can change this later by modifying the generated <span>pbiviz.json</span> file. This command will create a new folder in your current directory and generate a basic 'sample template' for your visual.

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f14.png" alt="" width="581" height="162" class="aligncenter size-full wp-image-1785" />

Once it finishes, you also need to <strong>download all dependencies listed in the package.json file</strong> using this command from within the newly created folder:
<pre>cd VisualName

npm install</pre>
<em>Note: This command should also be executed if you download and build an already existing visual.</em>

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f15.png" alt="" width="581" height="217" class="aligncenter size-full wp-image-1795" />

Then use your favorite code editor to start working on your new visual!
<h1>Step 5</h1>
<h2>Running your visual</h2>
To run your visual, navigate to the root of your visual project (the directory containing pbiviz.json) and <strong>type</strong>:
<pre>pbiviz start</pre>
to build and serve the visual.

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f16.png" alt="" width="385" height="140" class="aligncenter size-full wp-image-1805" />

This command will compile your <span><a href="http://www.typescriptlang.org/">typescript</a></span> and <span><a href="http://lesscss.org/">less</a></span> files and bundle them for testing. It also launches an https server that will serve your visual for testing in your favorite web browser.

To end the session, type "Ctrl + C" and when you are prompted "Terminate batch job (Y/N)?" type "Y".
<h1>Step 6</h1>
<h2>Viewing your visual in PowerBI</h2>
To view your visual, go to your desired report and add the debug visual.

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f17.png" alt="" width="268" height="253" class="aligncenter size-full wp-image-1815" />
<ul>
 	<li>Open <span><a href="https://msit.powerbi.com/">https://msit.powerbi.com/</a></span> and log in with your Power BI account</li>
</ul>
<ul>
 	<li>Go to <strong>Settings</strong> in the gear menu:</li>
</ul>
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f18.png" alt="" width="221" height="338" class="aligncenter size-full wp-image-1825" />
<ul>
 	<li>Click on Developer</li>
 	<li>Check the “<strong>Enable developer visual for testing”</strong> checkbox</li>
</ul>
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f19.png" alt="" width="624" height="323" class="aligncenter size-full wp-image-1835" />
<ul>
 	<li>Go back to your Power BI and click on your desired report</li>
 	<li>Find the Visualizations pane by clicking on “Edit report”</li>
 	<li>Select the Developer Visual in the Visualizations pane:</li>
</ul>
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f20.png" alt="" width="187" height="180" class="aligncenter size-full wp-image-1845" />
<ul>
 	<li>Select the visual in the report canvas</li>
 	<li>Bind data like normal</li>
 	<li>Begin developing your visual (make sure pbiviz start is running).</li>
</ul>
Once your server is started, you will see the default template as your visual.

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/f22.png" alt="" width="356" height="425" class="aligncenter size-full wp-image-1865" />
<h1>Step 7</h1>
<h2>Installing the D3 JavaScript library</h2>
To get started on programming your own Custom Visuals, D3 is a great library you can use. D3 is one of the most powerful and flexible JavaScript custom visualization tool, because it does not constrain you to any pre-set charts or visualizations.

In your project folder, via command line, run these two lines separately:
<pre>npm install --save d3

npm install -D @types/d3</pre>
Next, open the “pbiviz.json” file in your favorite text editor and find the “externalJS” section:
<pre><span style="color: #3366ff">"externalJS"</span>: [
<span style="color: #993300">"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",</span>
],</pre>
Add this line of code to reference the path to d3.min.js – verify that the d3.min.js is in this path.
<pre><span style="color: #993300">"node_modules/d3/dist/d3.min.js"</span></pre>
Next, in your project’s visual.ts file, you want to add D3 to your window Interface.
<pre><span style="color: #0000ff">interface</span> <span style="color: #008080">Window </span>{
    <span style="color: #000080">d3</span>: <span style="color: #0000ff">typeof</span> <span style="color: #008080">d3</span>
}</pre>
When instantiating your private variables at the top of the file, add:
<pre><span style="color: #0000ff">private</span> <span style="color: #000080">d3</span>: <span style="color: #0000ff">typeof</span> <span style="color: #008080">d3</span>;</pre>
And add this line below the constructor:
<pre><span style="color: #0000ff">constructor</span>(<span style="color: #000080">options</span>: <span style="color: #008080">VisualConstructorOptions</span>) {
            <span style="color: #0000ff">this</span>.<span style="color: #000080">d3</span> = <span style="color: #000080">window.d3</span>;</pre>
<h1>Step 8</h1>
<h2>Packaging your visual for distribution</h2>
Before you can load your visual into <a href="https://powerbi.microsoft.com/en-us/desktop/">PowerBI Desktop</a> or share it with the community in the <a href="https://visuals.powerbi.com/">PowerBI Visual Gallery</a>, you'll need to generate a pbiviz file.

To package your visual, navigate to the root of your visual project (the directory containing pbiviz.json) and use the following command to generate a pbiviz file:
<pre>pbiviz package</pre>
This command will create a pbiviz file in the dist/ directory of your visual project. If there is already a pbiviz file (from previous package operations) it will be overwritten.]]></content:encoded>
    </item>
    <item>
      <title>Import a Power BI Custom Visual</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/import-a-power-bi-custom-visual</link>
      <pubDate>Tue, 22 May 2018 17:14:43 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=1545</guid>
      <description><![CDATA[All you need to import a Custom Visual from the Power BI App Store is a Microsoft account and one...]]></description>
      <content:encoded><![CDATA[All you need to import a Custom Visual from the Power BI App Store is a Microsoft account and one Power BI report.

You can import the custom visual into <span><a href="https://go.microsoft.com/fwlink/?linkid=534232">Power BI</a></span> on the web by visiting  <span><a href="https://powerbi.microsoft.com/en-us/">https://powerbi.microsoft.com/en-us/</a></span> and clicking “Sign In”
Note: Ensure that you have uploaded a table of data to your workspace and have created a report.
<h4>App Store:</h4>
<span><a href="https://appsource.microsoft.com/en-us/marketplace/apps?product=power-bi-visuals">https://appsource.microsoft.com/en-us/marketplace/apps?product=power-bi-visuals</a></span>
<h5><span>Example Histogram Visual:</span></h5>
<span><a href="https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104380776?tab=Overview">https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104380776?tab=Overview</a></span>
<ol>
 	<li>In the App Store, click the blue “GET IT NOW” button on a Power BI visual.
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/Fig1.png" alt="" width="465" height="320" class="wp-image-1555 alignnone" /></li>
 	<li>Read, understand, and agree to terms of use and privacy policy, etc.</li>
 	<li>Note which Microsoft account you are signed in as.</li>
 	<li>Click “Continue”
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/Fig2.png" alt="" width="484" height="457" class="wp-image-1565 alignnone" /></li>
 	<li>Wait for the website to take you to Power BI Visuals.
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/Fig3.png" alt="" width="339" height="307" class="wp-image-1575 alignnone" /></li>
 	<li>Click “Select to download <strong>Histogram Chart</strong>” (or a chart of your choosing).</li>
</ol>
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/Fig4.png" alt="" width="513" height="427" class="wp-image-1585 alignnone" />

You can import the custom visual into <span><a href="https://go.microsoft.com/fwlink/?linkid=534232">Power BI</a></span> on the web by visiting  <a href="https://powerbi.microsoft.com/en-us/">https://powerbi.microsoft.com/en-us/</a> and clicking “Sign In”

(You may <span><a href="https://go.microsoft.com/fwlink/?linkid=619517">Download Power BI Desktop</a></span> for free if you don't have it.)

Once you've opened your account in the Power BI application of your choice, follow the directions below to import the custom visual into one of your existing reports:

<img src="https://msdnshared.blob.core.windows.net/media/2018/05/Fig6.png" alt="" width="284" height="186" class="wp-image-1605 alignnone" />
<ol>
 	<li>Select the ellipsis from the visualizations pane.
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/Fig7.png" alt="" width="208" height="198" class="wp-image-1615 alignnone" /></li>
 	<li>Select “<strong>Import from file</strong>” or “<strong>Import from marketplace</strong>” from the menu.
(Take note of the “Caution: Import Custom Visual” warning: Custom visuals may be provided by third parties and could contain security or privacy risks. Only import from trusted authors and sources.)
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/Fig8.png" alt="" width="350" height="229" class="size-full wp-image-1625 alignnone" /></li>
 	<li>Select the custom visual file (.PBIVIZ) in the folder you downloaded it to, then select Open.
<img src="https://msdnshared.blob.core.windows.net/media/2018/05/Fig9.png" alt="" width="274" height="179" class=" wp-image-1635 alignnone" /></li>
 	<li>The visual will appear as a new icon in the visualizations pane. Select it to create the visual on the report canvas.</li>
</ol>
<span><a href="https://go.microsoft.com/fwlink/?linkid=837759">Learn more about creating reports in Power BI</a></span> at <span><a href="https://go.microsoft.com/fwlink/?linkid=837759">https://go.microsoft.com/fwlink/?linkid=837759</a></span>
or <span><a href="https://docs.microsoft.com/en-us/power-bi/service-the-report-editor-take-a-tour">https://docs.microsoft.com/en-us/power-bi/service-the-report-editor-take-a-tour</a></span>

You can also <span><a href="https://visuals.azureedge.net/app-store/Histogram.1.2.0.0.pbix">download the sample report</a></span>.]]></content:encoded>
    </item>
    <item>
      <title>A Whirlwind Tour of RNNs with Docker (shortcut!)</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/a-whirlwind-tour-of-rnns-with-docker-the-easy-way</link>
      <pubDate>Thu, 04 Jan 2018 12:34:50 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=1465</guid>
      <description><![CDATA[Note: This video has subtitles - Click the "CC" button to activate.
RNN on Windows 10:...]]></description>
      <content:encoded><![CDATA[<iframe width="960" height="540" src="https://channel9.msdn.com/posts/Whirlwind-Tour-RNNs/player" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Note: This video has subtitles - Click the "CC" button to activate.
<h1>RNN on Windows 10: Docker</h1>
I created an <a href="https://azure.microsoft.com/en-us/services/container-registry/">Azure Container Registry</a> (ACR) to store a Docker container image of Cristian Baldi’s Docker-torch-rnn (which uses Justin Johnson’s “torch-rnn” project, a refactoring of Andrej Karpathy’s “char-rnn.”) An ACR allows for the use of open-source Docker command line interface (CLI) tools, and keeps container images near deployments to reduce latency and costs.
<h1>Step 0) Prerequisites</h1>
<ul>
 	<li><strong>Docker CLI</strong>. To set up your local computer as a Docker host and access the Docker CLI commands, install <a href="https://docs.docker.com/engine/installation/">Docker Engine</a> before starting this workshop. <a href="https://docs.docker.com/engine/installation/">https://docs.docker.com/engine/installation/</a></li>
 	<li><strong>Windows</strong>. This workshop contains screenshots from a Windows 10 Enterprise PC with the latest updates.</li>
 	<li><strong>Bash on Ubuntu on Windows</strong> is the preferred CLI for this workshop. <a href="https://www.windowscentral.com/how-install-bash-shell-command-line-windows-10">https://www.windowscentral.com/how-install-bash-shell-command-line-windows-10</a></li>
</ul>
<h1>Step 1) Start Docker</h1>
Start Docker by clicking the Whale icon. <strong>Bash on Ubuntu on Windows</strong> is preferred for typing Docker commands. If your Docker commands don’t work in Bash, try restarting your computer, or using Windows <strong>PowerShell</strong>.

<img src="https://msdnshared.blob.core.windows.net/media/2018/01/Docker-up.png" alt="" width="300" height="276" class="aligncenter wp-image-1486" /><img src="https://msdnshared.blob.core.windows.net/media/2018/01/Docker-is-running.png" alt="" width="300" height="160" class="aligncenter wp-image-1475" />

<em>Note: </em>Make sure the white whale in your task bar is set for using Linux. If you right click it and it says “Switch to Windows containers,” leave it alone; you are good to go.

<img src="https://msdnshared.blob.core.windows.net/media/2018/01/DockerSettings.png" alt="" width="200" height="237" class="aligncenter wp-image-1485" />

<em>Docker must be running with "<strong>Expose daemon on tcp://localhost:2375 without TLS</strong>" enabled. (Right click on the system tray icon then "Settings..."). <strong>This is not checked by default, so you must check it.</strong>
<img src="https://msdnshared.blob.core.windows.net/media/2018/01/Daemon-1024x667.png" alt="" width="1024" height="667" class="aligncenter wp-image-1466 size-large" />
</em>
<h1>Step 2) Run Image</h1>
<pre><span><strong>docker -v</strong></span></pre>
Writing “<strong>docker -v</strong>” as your first command will ensure your Docker commands are working by showing you which version and build of Docker your machine is running.
<pre><strong>docker run hello-world</strong></pre>
To connect a docker client to Docker for Windows, keep in mind that Docker for Windows runs a Linux Hyper-V VM where it starts the daemon. Try running "<strong>docker run hello-world</strong>" so that the Docker client connects to the docker daemon. This "export" step is optional:
<pre><span><strong>export DOCKER_HOST=tcp://127.0.0.1:2375 </strong></span></pre>
To pull or run Sarah’s pre-trained Docker snapshot to avoid waiting for hours, type:
<pre><strong>docker run -it saelia/rnn-js /bin/bash</strong></pre>
Adding .<span>/bin/bash</span> to the end will give you a bash terminal to work in. You shouldn't need to type "docker pull" before you do "docker run" because if the image isn't there, docker will pull the image for you in the "docker run" step.

<em>To show all docker containers - <strong>sudo docker ps -a
</strong>To start docker container - <strong>sudo docker start &lt;container-name&gt;
</strong>To attach to docker container - <strong>sudo docker attach &lt;container-name&gt;</strong></em>
<h1>Step 3) Sample Text</h1>
The way to actually make the RNN generate new text is with the data sampling script<a href="#_ftn1"><span>[1]</span></a>:
<pre><span><strong>th sample.lua -gpu -1 -checkpoint cv/checkpoint_12900.t7 -length 150 -temperature .7</strong></span><span><strong>
</strong></span></pre>
<img src="https://msdnshared.blob.core.windows.net/media/2018/01/SampleText.png" alt="" width="1292" height="148" class="wp-image-1495 size-full" />

Figure 1: "The mind the same hath so much but promise the brother." - Catesby, William Fakespeare
<h2>Sample Flags</h2>
<strong>GPU:</strong> Setting the flag <span>gpu</span> to -1 tells the code to train using CPU; otherwise it defaults to GPU 0.
<strong>Length:</strong> An important flag is <span>-length.</span> 100 would generate a body of text 100 characters in length. The default is 2000.
<strong>Temperature</strong>: An important parameter you may want to play with is <span>-temperature</span>, which takes a number in range (0 to 1, 0 not included), default = 1. Lower temperature will cause the model to make more “likely” but more boring and conservative predictions. Higher temperatures cause the model to take more chances and increase diversity of results, but at a cost of more mistakes.
<a href="#_ftnref1"><span>[1]</span></a> sample.lua
<h1>Shutting Down</h1>
How to turn off Docker: Type “exit”, Close PowerShell. Right click the white whale in your task bar. Sign out / quit Docker.]]></content:encoded>
    </item>
    <item>
      <title>A Whirlwind Tour of Recurrent Neural Networks (no shortcuts)</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/a-whirlwind-tour-of-recurrent-neural-networks-the-hard-way</link>
      <pubDate>Thu, 04 Jan 2018 12:11:28 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=1435</guid>
      <description><![CDATA[Welcome to a Whirlwind Tour of RNNs!
PLEASE see this previous blog post for important information...]]></description>
      <content:encoded><![CDATA[<h1>Welcome to a Whirlwind Tour of RNNs!</h1>
<h2>PLEASE see <a target="_blank" href="https://blogs.msdn.microsoft.com/sarahsays/2018/01/04/whirlwind-tour-of-recurrent-neural-networks-prerequisites/" rel="noopener">this previous blog post</a> for important information and prerequisites before continuing!</h2>
<h1>Step 1) Preprocess</h1>
Before you begin, you'll need to preprocess your data set, using the script "scripts/preprocess.py". This will generate an HDF5 file and JSON file containing a preprocessed version of the data.

Torch-rnn comes with a sample input file (all the writings of Shakespeare) that you can use to test everything. Of course, you can also use your own data; just combine everything into a single text file.

In the terminal, go to your Torch-rnn folder and run the preprocessor script:
<pre>python scripts/preprocess.py --input_txt data/tiny-shakespeare.txt --output_h5 data/tiny-shakespeare.h5 --output_json data/tiny-shakespeare.json</pre>
You should get a response that looks something like this:
<pre>Total vocabulary size: 65
Total tokens in file: 1115394
  Training size: 892316
  Val size: 111539
  Test size: 111539
Using dtype &lt;type 'numpy.uint8'&gt;</pre>
This will save two files to the data directory (though you can save them anywhere): an h5 and json file that we’ll use to train our system.
<h2><a></a>Preprocessing Flags</h2>
The preprocessing script scripts/preprocess.py accepts the following command-line flags:
<ul>
 	<li>--input_txt: Path to the text file to be used for training.
<ul>
 	<li>Default is the tiny-shakespeare.txt dataset.</li>
</ul>
</li>
 	<li>--output_h5: Path to the HDF5 file where preprocessed data should be written.</li>
 	<li>--output_json: Path to the JSON file where preprocessed data should be written.</li>
 	<li>--val_frac: What fraction of the data to use as a validation set; default is 0.1.</li>
 	<li>--test_frac: What fraction of the data to use as a test set; default is 0.1.</li>
 	<li>--quiet: If you pass this flag then no output will be printed to the console.</li>
</ul>
<h1><a></a>Step 2) Train</h1>
The next step could take at least an hour, perhaps considerably longer, depending on your computer and your data set. In the Torch-rnn folder and run the training script (changing the arguments if you use a different data source or saved them elsewhere):
<pre>th train.lua -input_h5 data/tiny-shakespeare.h5 -input_json data/tiny-shakespeare.json -gpu -1</pre>
Try adding "time" at the beginning to clock how long this takes:
<pre>time th train.lua -gpu -1 -input_h5 data/tiny_shakespeare.h5 -input_json data/tiny_shakespeare.json -max_epochs 25 -print_every 10 -checkpoint_every 100 -batch_size 1 -seq_length 50</pre>
<h2><img src="https://msdnshared.blob.core.windows.net/media/2018/01/Training.png" alt="" width="400" height="492" class="aligncenter wp-image-1445" /></h2>
<h2><a></a>Training Flags</h2>
The training script "train.lua" accepts the following command-line flags:
<h3><a></a>Data options:</h3>
<ul>
 	<li>-input_h5, -input_json: Paths to the HDF5 and JSON files output from the preprocessing script.</li>
 	<li>-batch_size: Number of sequences to use in a minibatch; default is 50.</li>
 	<li>-seq_length: Number of timesteps for which the recurrent network is unrolled for backpropagation through time.</li>
</ul>
If you have a small body of text (under 2MB) you may want to try adding the following flags:
<ul>
 	<li>-batch_size 1 -seq_length 50</li>
</ul>
Setting -batch_size somewhere between 1-10 should give better results with the output.
<h3>Model options:</h3>
<ul>
 	<li>-init_from: Path to a checkpoint file from a previous run of train.lua. Use this to continue training from an existing checkpoint; if this flag is passed then the other flags in this section will be ignored and the architecture from the existing checkpoint will be used instead.</li>
 	<li>-reset_iterations: Set this to 0 to restore the iteration counter of a previous run. Default is 1 (do not restore iteration counter). Only applicable if -init_from option is used.</li>
 	<li>-model_type: The type of recurrent network to use; either lstm (default) or rnn.
lstm is slower but better.</li>
 	<li>-wordvec_size: Dimension of learned word vector embeddings; default is 64. You probably won't need to change this.</li>
 	<li>-rnn_size: The number of hidden units in the RNN; default is 128. Larger values (256 or 512) are commonly used to learn more powerful models and for bigger datasets, but this will significantly slow down computation.</li>
 	<li>-dropout: Amount of dropout regularization to apply after each RNN layer; must be in the range 0 &lt;= dropout &lt; 1. Setting dropout to 0 disables dropout, and higher numbers give a stronger regularizing effect.</li>
 	<li>-num_layers: The number of layers present in the RNN; default is 2.</li>
</ul>
<h3><a></a>Optimization options:</h3>
<ul>
 	<li>-max_epochs: How many training epochs to use for optimization. Default is 50.</li>
 	<li>-learning_rate: Learning rate for optimization. Default is 2e-3.</li>
 	<li>-grad_clip: Maximum value for gradients; default is 5. Set to 0 to disable gradient clipping.</li>
 	<li>-lr_decay_every: How often to decay the learning rate, in epochs; default is 5.</li>
 	<li>-lr_decay_factor: How much to decay the learning rate. After every lr_decay_every epochs, the learning rate will be multiplied by the lr_decay_factor; default is 0.5.</li>
</ul>
<h3><a></a>Output options:</h3>
<ul>
 	<li>-print_every: How often to print status message, in iterations. Default is 1.</li>
 	<li>-checkpoint_name: Base filename for saving checkpoints; default is cv/checkpoint. This will create checkpoints named - cv/checkpoint_1000.t7, cv/checkpoint_1000.json, etc.</li>
 	<li>-checkpoint_every: How often to save intermediate checkpoints. Default is 1000; set to 0 to disable intermediate checkpointing. Note that we always save a checkpoint on the final iteration of training.</li>
</ul>
<h3><a></a>Benchmark options:</h3>
<ul>
 	<li>-speed_benchmark: Set this to 1 to test the speed of the model at every iteration. This is disabled by default because it requires synchronizing the GPU at every iteration, which incurs a performance overhead. Speed benchmarking results will be printed and also stored in saved checkpoints.</li>
 	<li>-memory_benchmark: Set this to 1 to test the GPU memory usage at every iteration. This is disabled by default because like speed benchmarking it requires GPU synchronization. Memory benchmarking results will be printed and also stored in saved checkpoints. Only available when running in GPU mode.</li>
 	<li>Backend options:</li>
 	<li>-gpu: The ID of the GPU to use (zero-indexed). Default is 0. Set this to -1 to run in CPU-only mode</li>
 	<li>-gpu_backend: The GPU backend to use; either cuda or opencl. Default is cuda.</li>
</ul>
<h1><a></a>Step 3) Sample</h1>
<pre>th sample.lua -gpu -1 -checkpoint cv/checkpoint_900.t7 -length 250 -temperature 0.7</pre>
<h2><a></a>Sampling Flags</h2>
The sampling script sample.lua accepts the following command-line flags:
<ul>
 	<li>-checkpoint: Path to a .t7 checkpoint file from train.lua</li>
 	<li><strong>-length: The length of the generated text, in characters.</strong></li>
 	<li>-start_text: You can optionally start off the generation process with a string; if this is provided, the start text will be processed by the trained network before we start sampling. Without this flag, the first character is chosen randomly.</li>
 	<li><strong>-sample</strong>: Set this to 1 to sample from the next-character distribution at each timestep;
<strong>set to 0 to instead just pick the argmax at every timestep. Sampling tends to produce more interesting results.</strong></li>
 	<li><strong>-temperature</strong>: Softmax temperature to use when sampling; default is 1.
<strong>Higher temperatures give noisier samples.</strong> Not used when using argmax sampling (sample set to 0).</li>
 	<li>-gpu: The ID of the GPU to use (zero-indexed). Default is 0. <strong>Set this to -1 to run in CPU-only mode.</strong></li>
 	<li>-gpu_backend: The GPU backend to use; either cuda or opencl. Default is cuda.</li>
 	<li>-verbose: By default just the sampled text is printed to the console. Set this to 1 to also print some diagnostic information.</li>
</ul>
<img src="https://msdnshared.blob.core.windows.net/media/2018/01/Sample.png" alt="" width="600" height="426" class="aligncenter wp-image-1455" />]]></content:encoded>
    </item>
    <item>
      <title>Whirlwind Tour of Recurrent Neural Networks (PREREQUISITES)</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/whirlwind-tour-of-recurrent-neural-networks-prerequisites</link>
      <pubDate>Thu, 04 Jan 2018 11:52:56 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=1375</guid>
      <description><![CDATA[Neural Networks. Deep Learning. TensorFlow. What are these buzzwords? What is the latest Artificial...]]></description>
      <content:encoded><![CDATA[<span>Neural Networks. Deep Learning. TensorFlow. What are these buzzwords? What is the latest Artificial Intelligence craze? This advanced session contains cutting-edge information </span><em>not</em><span> easily found online, and does </span><em>not</em><span> require a PhD in Machine Learning to understand. Recurrent Neural Networks (RNNs) can be used to generate text that will look like its original training data. There are many </span><a href="http://lewisandquark.tumblr.com/tagged/neural+networks">articles</a><span> out there that show hilarious end-results of such adventures, but start-from-scratch walkthroughs that show the raw code are hard to come by. </span>This tutorial will show you how to install <a href="https://github.com/jcjohnson/torch-rnn">Torch-rnn</a>, a set of <a href="https://en.wikipedia.org/wiki/Recurrent_neural_network"><em>recurrent neural network</em></a> tools for character-based (i.e. single letter) learning and output, written by <a href="https://github.com/jcjohnson/torch-rnn">Justin Johnson</a>.
<h1><a></a>Step 1) Windows 10</h1>
This guide assumes the use of <strong>64-bit Windows 10</strong>.  For this exercise, we will be using Torch, which runs on Mac as well as per <a href="http://www.jeffreythompson.org/blog/2016/03/25/torch-rnn-mac-install/">this installation guide</a>, but I have not tested this scenario.

You will need to install Docker, Bash on Ubuntu on Windows, Torch, and some libraries, which are described in the following steps.  <strong>Please complete steps 1-7 </strong><strong>prior to starting on the next blog post.  </strong>

This article contains screenshots from a Windows 10 Enterprise PC with the Windows 10 Anniversary Update, and the Windows 10 Fall Creators Update. If you are using Windows 10, <a href="https://answers.microsoft.com/en-us/windows/forum/windows_10-windows_install-winpc/how-to-verify-if-you-downloaded-or-installed-the/06f98274-741a-45df-9e0d-6cc48816824b?auth=1">press the Windows Key+R and type “winver”</a> to verify that the Version number if 1607 or higher. If your Version is lower, install the Windows 10 Anniversary Update and/or Fall Creators Update.
<ul>
 	<li><strong>Bash on Ubuntu on Windows</strong> is the preferred CLI for this workshop. We’ll be doing everything in the terminal – if you’ve never used the command-line, it would be good to learn a bit more about how that works before attempting this install.
<a href="https://www.windowscentral.com/how-install-bash-shell-command-line-windows-10">https://www.windowscentral.com/how-install-bash-shell-command-line-windows-10</a></li>
</ul>
<h1><a></a>Step 2) Docker</h1>
If you have not already done so, please install <a href="https://docs.docker.com/docker-for-windows/install/"><strong>Docker for Windows</strong></a> by downloading the installer executable from the <strong>Stable</strong> channel. To set up your local computer as a Docker host and access the Docker CLI commands, install <a href="https://docs.docker.com/engine/installation/">Docker Engine</a> before starting this workshop. <a href="https://docs.docker.com/docker-for-windows/install/">https://docs.docker.com/docker-for-windows/install/</a>
<h1><a></a>Step 3): Install Bash</h1>
Installing the Bash shell on Windows 10 has a few prerequisites, including making sure you have run the <strong>Windows 10 Anniversary Update</strong> on your machine, ensuring <strong>Developer mode</strong> is turned on in your <strong>Update &amp; security Settings</strong>, and checking for the <strong>Windows Subsystem for Linux (beta)</strong> option in your <strong>Control Panel</strong>.

Please follow the guide on WindowsCentral.com, <a href="https://www.windowscentral.com/how-install-bash-shell-command-line-windows-10">How to install Bash shell command-line tool on Windows 10</a>, for complete the steps.

You check to see if your computer already has Bash installed by opening the Windows Start menu, typing a search for <strong>bash.exe</strong>, and selecting “Run command.”

<img src="https://msdnshared.blob.core.windows.net/media/2018/01/Bash.png" alt="" width="600" height="131" class="aligncenter wp-image-1385" />

If you see the message, “Windows Subsystem for Linux has no installed distributions,” distributions can be installed by visiting the Windows Store here: <a href="https://aka.ms/wslstore">https://aka.ms/wslstore</a>

<img src="https://msdnshared.blob.core.windows.net/media/2018/01/WindowsLinux.png" alt="" width="441" height="454" class="wp-image-1416 aligncenter" /><img src="https://msdnshared.blob.core.windows.net/media/2018/01/Ubuntu.png" alt="" width="440" height="140" class="wp-image-1405 aligncenter" />

This is how you can download and install Bash from the Windows Store. Then you'll need to create a default UNIX user account. This account doesn't have to be the same as your Windows account.

<img src="https://msdnshared.blob.core.windows.net/media/2018/01/UNIX.png" alt="" width="490" height="189" class="aligncenter wp-image-1415" />

Enter the username in the required field and press Enter (you can't use the username "admin"). Close the "bash.exe" command prompt.

Now that you completed the installation and setup, you can open the Bash tool from the Start menu like you would with any other app.
<h1><a></a>Step 4) Install <strong>Torch</strong></h1>
Visit <a href="https://github.com/jcjohnson/torch-rnn"></a><a href="http://github.com/jcjohnson/torch-rnn">github.com/jcjohnson/torch-rnn</a> OR <a href="http://www.jeffreythompson.org/blog/2016/03/25/torch-rnn-mac-install">jeffreythompson.org/blog/2016/03/25/torch-rnn-mac-install</a>  OR <a href="http://torch.ch/docs/getting-started.html#_">http://torch.ch/docs/getting-started.html#_</a> for more instructions!

Run your Bash on Ubuntu on Windows shell as an administrator. First, go to your user’s home directory and type:
<pre>git clone <a href="https://github.com/jcjohnson/torch-rnn.git">https://github.com/torch/distro.git</a> ~/torch --recursive</pre>
Hit Enter to clone a directory folder named “torch” inside Bash. This first command installs the basic package dependencies that LuaJIT and Torch require.  (If prompted, follow the command to install git first.)

Change directories into this new folder location:
<pre>cd ~/torch</pre>
Install dependencies such as LuaJIT and LuaRocks, then use LuaRocks (the lua package manager) to install core packages like torch, nn and paths, as well as a few other packages:
<pre>bash install-deps;</pre>
This will take 10–20 minutes. When complete, type this line:
<pre>./install.sh</pre>
This may take several minutes. You just have to source it once to refresh your env variables. The installation script will detect what is your current shell and modify the path in the correct configuration file:
<pre>source ~/.bashrc</pre>
When done, test it with the command:
<pre>th</pre>
This should give you the Torch prompt. Use Control-c twice to exit, or type os.exit().

<img src="https://msdnshared.blob.core.windows.net/media/2018/01/Torch-prompt.png" alt="" width="659" height="186" class="aligncenter size-full wp-image-1395" />

<em>You can install Torch anywhere you like, but you’ll have to update all the paths in this tutorial to your install location.</em>
<h1><a></a>Step 5) Install HDF5 Library for Lua</h1>
Torch-rnn comes with a preprocessor script, written in Python, that prepares our text for training. It will save our sample into an h5 and json file, but requires the HDF5 library to be installed.

You'll need to install the header files for Python 2.7 and the HDF5 library.

In Bash, go back to your home directory by typing:
<pre>cd ~/</pre>
Type:
<pre>sudo apt-get -y install python2.7-dev</pre>
Type in your password to grant permission. Next,
<pre>sudo apt-get install libhdf5-dev</pre>
Type “Y” at the yes/no prompt to grant permission here.
<pre>sudo apt-get install python-virtualenv</pre>
Type “Y” at the yes/no prompt to grant permission here.
<h1><a></a>Step 6) Clone <strong>Torch-rnn</strong></h1>
In your Bash’s home directory, type:
<pre>git clone https://github.com/jcjohnson/torch-rnn.git</pre>
This directory contains the files shown in this screenshot:

<img src="https://msdnshared.blob.core.windows.net/media/2018/01/Clone.png" alt="" width="600" height="440" class="wp-image-1425 aligncenter" />

After installing torch, install/update the lua packages by running the following in the home directory:
<pre><span style="color: #808080"># Install most things using luarocks</span>

luarocks install torch 

luarocks install nn 

luarocks install optim 

luarocks install lua-cjson 

<span style="color: #808080"># We need to install torch-hdf5 from GitHub</span>

cd ..

git clone https://github.com/deepmind/torch-hdf5<span> </span>

<span>cd</span> torch-hdf5

luarocks make hdf5-0-0.rockspec</pre>
<h1><a></a>Step 7) Install HDF5 Library for Python</h1>
The preprocessing script is written in Python 2.7; its dependencies are in the file requirements.txt.

Install pip by typing:
<pre>sudo apt install python-pip</pre>
Then, in the torch-rnn folder, type:
<pre>sudo pip install -r requirements.txt</pre>
This should install requirements Cython, NumPy, argparse, h5py, and six.

We need to install HDF5 support for Python. You can do this using Pip:
<pre>sudo pip install h5py</pre>
Test that it works by importing the library:
<pre>python
 import h5py</pre>
If it imports without error, you’re good! <em>(Use “exit()” or Ctrl-D to exit Python.)</em>
<h1><a></a>Next Steps:</h1>
<h2>If you want to actually train a model, continue reading here: <a href="https://blogs.msdn.microsoft.com/sarahsays/2018/01/04/a-whirlwind-tour-of-recurrent-neural-networks-the-hard-way/" rel="bookmark">A Whirlwind Tour of Recurrent Neural Networks (the hard way)</a></h2>
<h2>If you want to call a pre-trained model, continue reading here: <a href="https://blogs.msdn.microsoft.com/sarahsays/2018/01/04/a-whirlwind-tour-of-rnns-with-docker-the-easy-way/" rel="bookmark">A Whirlwind Tour of RNNs with Docker (the easy way)</a></h2>
<h1>Step 8) *OPTIONAL*:  Install CUDA Support</h1>
Torch-rnn is built on <a href="http://torch.ch/">Torch</a>, a set of scientific computing tools for the programming language <a href="http://www.lua.org/">Lua</a>, which lets us take advantage of the GPU, using CUDA or OpenCL to accelerate the training process. Training can take a very long time, especially with large data sets, so the GPU acceleration is a big plus.

<strong><em>Note: this step is only possible if your computer has an NVIDIA graphics card!</em></strong>

First: Download any version of <strong>Visual Studio 2017</strong>:  <a href="https://www.visualstudio.com/downloads/">https://www.visualstudio.com/downloads/</a>
(Community, Professional, or Enterprise).

Download the CUDA tools with the network install: <a href="https://developer.nvidia.com/cuda-downloads">https://developer.nvidia.com/cuda-downloads</a>.

“Bash on Ubuntu on Windows” Installation Instructions:
<ol>
 	<li>
<pre>curl http://developer.download.nvidia.com/compute/cuda/repos/ubuntu1604/x86_64/cuda-repo-ubuntu1604_9.1.85-1_amd64.deb</pre>
</li>
 	<li>
<pre>sudo dpkg -i cuda-repo-ubuntu1604_9.1.85-1_amd64.deb</pre>
</li>
 	<li>
<pre>sudo apt-key adv --fetch-keys http://developer.download.nvidia.com/compute/cuda/repos/ubuntu1604/x86_64/7fa2af80.pub</pre>
</li>
 	<li>
<pre>sudo apt-get update</pre>
</li>
 	<li>
<pre>sudo apt-get install cuda</pre>
</li>
</ol>
This will take 15-20 minutes.

In Bash, in your ~/torch-rnn folder, install "cutorch" by typing:
<pre>luarocks install cutorch</pre>
You may also need to run:
<pre>git config --global user.email "you@example.com"

git config --global user.name "Your Name"</pre>
<h1>Next Steps:</h1>
<h2>If you want to actually train a model, continue reading here: <a href="https://blogs.msdn.microsoft.com/sarahsays/2018/01/04/a-whirlwind-tour-of-recurrent-neural-networks-the-hard-way/" rel="bookmark">A Whirlwind Tour of Recurrent Neural Networks (the hard way)</a></h2>
<h2>If you want to call a pre-trained model, continue reading here: <a href="https://blogs.msdn.microsoft.com/sarahsays/2018/01/04/a-whirlwind-tour-of-rnns-with-docker-the-easy-way/" rel="bookmark">A Whirlwind Tour of RNNs with Docker (the easy way)</a></h2>]]></content:encoded>
    </item>
    <item>
      <title>Demystifying Construct 3</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/demystifying-construct-3</link>
      <pubDate>Mon, 13 Nov 2017 20:59:55 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=1186</guid>
      <description><![CDATA[Construct 3 allows you to easily make games for HTML websites, and export to all kinds of platforms....]]></description>
      <content:encoded><![CDATA[<span><a target="_blank" href="https://www.construct.net/" rel="noopener">Construct 3</a></span><span> allows you to easily make games for HTML websites, and export to all kinds of platforms. It's</span><span> free, fully contained in-browser, and no installation required, so it works on Macs too! Construct 2, also made by Scirra, is a downloadable program (for Windows only) that works in much the same way as Construct 3. </span>

<span>Both Construct 2 and 3 come with incredibly useful tutorials that I highly suggest following, as well as a few example games that you can tweak to get the feel of it. Scirra also has additional <a target="_blank" href="https://www.construct.net/tutorials/beginners-guide-to-construct-3-1" rel="noopener">tutorials</a></span><span> that are incredibly helpful, and if you need help on a specific niche issue, the </span><span><a target="_blank" href="https://www.scirra.com/forum/" rel="noopener">Scirra Forums</a></span><span> provide a lot of assistance, guides, and plugins.</span>

Let's get started making your first game. We'll be making a<span> </span><span style="color: #000000"><strong>Snowball Fight </strong></span>demo game. You'll learn everything you need to know to make a simple game!
<h3>SEE THE FINISHED GAME</h3>
It's helpful to know what we're heading towards, so <a target="_blank" href="https://www.scirra.com/arcade/tutorial-games/snowball-fight-23010" rel="noopener"><strong><span style="text-decoration: underline">click here to open the finished game! </span></strong></a> (Art assets made by <a href="https://po-art.tumblr.com/">Patrick Owens</a> <span>on Tumblr. You can find them here: <a href="https://po-art.tumblr.com">https://po-art.tumblr.com</a>)</span>

Then you can see what we're aiming for: a player who looks at the mouse, moves with the arrows keys, and shoots <span style="color: #000000">monsters </span>with the mouse.
<h2>GETTING STARTED</h2>
If you're not already looking at a fresh copy of Construct 3, simply visit<span> </span><a target="_blank" href="https://editor.construct.net/" rel="noopener" title="Go to https://editor.construct.net/">editor.construct.net</a>. That's right, Construct 3 runs right in your browser! There is nothing to install or set up. If you see an error, check the<span> </span><a target="_blank" href="https://www.construct.net/make-games/manuals/construct-3/getting-started/system-requirements" rel="noopener" title="Go to https://www.construct.net/make-games/manuals/construct-3/getting-started/system-requirements">system requirements</a><span> </span>page, you might need to update your browser or system.
<h3>CREATE A NEW PROJECT</h3>
Click the<span> </span><strong>New project</strong><span> </span>button. A dialog will appear asking for some details. You don't have to change anything, but you can type in a name for your project if you like (how about<span> </span><em>My First Game</em>?). Click<span> </span><strong>Create</strong><span> </span>and you should see a new empty project something like this.
<div class="imgAlign">
<div class="imageWrapper">

<a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1097/new-project-view.png" rel="noopener" title="Open original 3367x1851px in new window (249 KB)"></a><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1097/new-project-view.png" rel="noopener"><img class="jsEnabled loaded aligncenter" width="873" height="478" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1097/new-project-view_v600.png" alt="A new empty project in Construct 3" /></a>

</div>
</div>
<aside>
<div class="notice tip">

The main view in the middle of the screen is the <em>layout view</em>. This is the design view where you create and position objects. Think of a <em>layout</em> like a game level or menu screen. In other tools, this might have been called a <em>room</em>, <em>scene</em> or <em>frame</em>.
<h2>ADDING OBJECTS</h2>
Let's add the objects our game will need. The first is the background.
<h3>TILED BACKGROUND</h3>
An easy way to make a background is to repeat an image over the layout. The<span> </span><em>Tiled background</em><span> </span>object can do this for us. First, here's your background image - right click it and save it to your computer somewhere:
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Sarah_ice_s.png" alt="Background image to use" width="256" height="256" class="aligncenter wp-image-1195 size-full" /></div>
<div></div>
</div>
Now,<span> </span><strong>double click</strong><span> </span>a space in the layout to create a new object. (Later, if it's full, you can also right-click and select<span> </span><em>Insert new object</em>.) Once the<span> </span><em>Create new object</em><span> </span>dialog appears,<span> </span><strong>double click the Tiled Background object</strong>.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1099/create-tiledbg.png" rel="noopener" title="Open original 1395x1296px in new window (100 KB)"><img class="jsEnabled loaded aligncenter" width="558" height="518" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1099/create-tiledbg_v600.png" alt="Creating a tiled background object" /></a></div>
</div>
<strong>The mouse will turn in to a crosshair</strong><span> </span>for you to indicate where to place the object. Click somewhere near the middle of the layout. The image editor now opens for you to draw or import the image to tile. Let's import the background image you saved earlier. Click the folder icon to load an image from your computer, find where you downloaded the file to, and select it.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1100/load-image.png" rel="noopener" title="Open original 821x265px in new window (21 KB)"><img class="jsEnabled loaded aligncenter" width="328" height="106" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1100/load-image_v330.png" alt="Importing an image" /></a></div>
</div>
Close the image editor by clicking the X in the top-right. Now you should see your tiled background object in the layout. Let's resize it to cover the entire layout. Make sure it's selected, then the<span> </span><em>Properties Bar</em><span> </span>on the left should show all the settings for the object, including its size and position. Set its position to<span> </span><strong>0, 0</strong><span> </span>(the top left of the layout), and its size to<span> </span><strong>1708 x 960</strong><span> </span>(the size of the layout - this is the default size, based on twice the size of the viewport).
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1101/background-pos.png" rel="noopener" title="Open original 770x737px in new window (52 KB)"><img class="jsEnabled loaded aligncenter" width="308" height="295" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1101/background-pos_v310.png" alt="The position and size for the background" /></a></div>
</div>
Let's survey our work. Hold<span> </span><kbd>Control</kbd><span> </span>and<span> </span><strong>scroll the mouse wheel down</strong><span> </span>to zoom out. Alternatively, right-click and select<span> </span><span class="navWrap">View<span class="arr">►</span>Zoom out</span><span> </span>a couple of times. You can also hold<span> </span><kbd>Space bar</kbd>, or the<span> </span><strong>middle mouse button</strong>, to pan around. Neat, huh? Your tiled background should cover the entire layout now:
<div class="imgAlign">
<div class="imageWrapper">

<img src="https://msdnshared.blob.core.windows.net/media/2017/11/zoomed-out-view-of-layout-1024x498.png" alt="Zoomed out view of layout" width="1024" height="498" class="aligncenter wp-image-1215 size-large" />

</div>
</div>
Hit<span> </span><kbd>Ctrl</kbd><span> </span>+<span> </span><kbd>0</kbd><span> </span>or right-click and select<span> </span><span class="navWrap">View<span class="arr">►</span>Reset zoom</span><span> </span>to return to 1:1 view.

Click the <strong>Preview</strong> button in the main toolbar (shown circled in red below) and the preview window should pop up showing your tiled layout!
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1096/preview-button.png" rel="noopener" title="Open original 677x113px in new window (4 KB)"><img class="jsEnabled loaded aligncenter" width="271" height="45" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1096/preview-button_v280.png" alt="The Preview button in Construct 3" /></a></div>
</div>
Before we continue, the tiled background should be<span> </span><strong>locked</strong>. As we create and move around objects on top of it, it's easy to accidentally select or modify the background. Since we don't need to change the background any more, locking it makes it unselectable, so it won't get in the way. To lock it, right-click on the tiled background and select<span> </span><span class="navWrap">Lock<span class="arr">►</span>Lock selection</span>. (If you do want to change it later on, simply right-click and select<span> </span><span class="navWrap">Lock<span class="arr">►</span>Unlock all</span>.)
<h2>ADD THE INPUT OBJECTS</h2>
Double-click in a space (this can be anywhere since the tiled background is locked) to add another new object. This time, select the<span> </span><strong>Mouse</strong><span> </span>object, since we'll need mouse input. Do the same again for the<span> </span><strong>Keyboard</strong><span> </span>object.

<img src="https://msdnshared.blob.core.windows.net/media/2017/11/Mouse-Keyboard-300x251.png" alt="" width="300" height="251" class="aligncenter wp-image-1246 size-medium" />

Note that these objects don't need placing in a layout. They are hidden, and automatically work across the entire project. Now all layouts in our project can accept mouse and keyboard input.
<h2>THE GAME OBJECTS</h2>
<p style="text-align: left">It's time to add our game objects! Here are your images - save them all to your computer as you did before with the background image.</p>
<p style="text-align: center">Player image:</p>

<div class="imgAlign" style="text-align: center">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Player_peguin.png" alt="Player image" width="108" height="103" class="aligncenter wp-image-1205 size-full" /></div>
</div>
<p style="text-align: center"><span style="color: #00ccff"><span style="color: #000000">Monster</span> </span>image:</p>

<div class="imgAlign" style="text-align: center">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Monster_snowman.png" alt="Monster image" width="145" height="100" class="aligncenter wp-image-1225 size-full" /></div>
</div>
<p style="text-align: center"><span style="color: #000000">Bullet</span> image:</p>

<div class="imgAlign" style="text-align: center">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/snowball.png" alt="" width="60" height="40" class="aligncenter wp-image-1235 size-full" /></div>
</div>
<p style="text-align: center"><span style="color: #000000">Explosion </span>image:</p>
<p style="text-align: center"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Sarah_flurry_3.png" alt="" width="213" height="182" class="aligncenter wp-image-1255 size-full" /></p>

<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1106/explosion.png" rel="noopener" title="Open original 118x101px in new window (7 KB)"></a></div>
</div>
For each of these objects, we will add a<span> </span><strong>Sprite</strong><span> </span>object. Sprites simply display an image, which you can move about, rotate, resize and optionally animate. Games are generally composed mostly out of sprite objects. Let's add each of the above four objects as sprite objects. The process is similar to inserting the Tiled Background:
<ol class="list">
 	<li><strong>Double click</strong><span> </span>to insert a new object</li>
 	<li><strong>Double click</strong><span> </span>the<span> </span><strong>Sprite</strong><span> </span>object.</li>
 	<li>When the mouse turns to a crosshair, click somewhere in the layout to place it</li>
 	<li>The image editor pops up. Click the<span> </span><em>Load image </em>button, and load one of the four images.</li>
 	<li>Close the image editor. You should now see the object in the layout!</li>
</ol>
<aside>
<div class="notice tip">

Another quick way to create sprite objects is to drag and drop the image file in to the layout view. Construct will create a Sprite with that image for you. Be sure to drag each image in one at a time though - if you drag all four files in at once, Construct will make a single sprite with four animation frames.

</div>
</aside>Move t<span style="color: #000000">he <em>bullet</em> and <em>explosion</em> sprites to somewhere off the edge of the layout - we don't want to see them when the game starts.</span>

<span style="color: #000000">These objects might be called <em>Sprite</em>, <em>Sprite2</em>, <em>Sprite3</em> and <em>Sprite4</em>. That's not very useful - things will quickly get confusing like this. Rename them to <em>Player</em>, <em>Monster</em>, <em>Bullet </em>and <em>Explosion</em> a</span>s appropriate. You can do it by selecting the object, then changing the<span> </span><strong>Name</strong><span> </span>property in the properties bar:
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1107/rename-object.png" rel="noopener" title="Open original 770x359px in new window (19 KB)"><img class="jsEnabled loaded aligncenter" width="308" height="144" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1107/rename-object_v310.png" alt="Renaming an object" /></a></div>
<div>
<h2>ADDING BEHAVIORS</h2>
Behaviors are quick ways to make an object act a certain way. You can usually do the same in events, but behaviors are much quicker! Construct has a wide range of behaviors, but here are a few that we'll use in this tutorial.
<ul class="list">
 	<li><strong>8 Direction</strong><span> </span>movement: this lets you move an object around with the arrow keys. It will do nicely for the player's movement.</li>
 	<li><strong>Bullet</strong><span> </span>movement: this simply moves an object forwards at its current angle. It'll work great for the<span style="color: #000000"> player's bullets. Despite the name, it'll also work nicely to move the monsters around - since all the movement does is move objects forwards at some speed.</span></li>
 	<li><span style="color: #000000"><strong>Scroll to:</strong> this makes the screen follow an object as it moves around (also known as scrolling). This will be useful to keep the view centered on the player.</span></li>
 	<li><span style="color: #000000"><strong>Bound to layout:</strong> this will stop an object leaving the layout area. This will also be useful on the player, so they can't wander off outside the game area!</span></li>
 	<li><span style="color: #000000"><strong>Destroy outside layout:</strong> instead of stopping an object leaving the layout area, this destroys it. It's useful for our bullets. Without it, bullets would fly off the screen forever, always taking a little bit of memory and processing power. Instead, we should destroy the bullets once they've left the layout.</span></li>
 	<li><span style="color: #000000"><strong>Fade:</strong> this makes an object fade out, which we will use on the explosions.</span></li>
</ul>
Let's add these behaviors to the objects that need them.
<h2>HOW TO ADD A BEHAVIOR</h2>
Let's add the<span> </span><strong>8 direction</strong><span> </span>movement behavior to the player. Click the player object to select it. In the Properties Bar, notice the Behaviors category. Click the<span> </span><strong>Behaviors</strong><span> </span>link there. The Behaviors dialog for the player will open.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1108/behaviors-dlg.png" rel="noopener" title="Open original 1818x686px in new window (204 KB)"><img class="jsEnabled loaded aligncenter" width="600" height="226" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1108/behaviors-dlg_v600.png" alt="The Behaviors dialog" /></a></div>
</div>
Click<span> </span><strong>Add new behavior</strong><span> </span>in the behaviors dialog. Double-click the<span> </span><strong>8 direction</strong><span> </span>movement to add it.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1109/add-8dir.png" rel="noopener" title="Open original 1337x1180px in new window (86 KB)"><img class="jsEnabled loaded aligncenter" width="535" height="472" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1109/add-8dir_v550.png" alt="Adding the 8 direction behavior" /></a></div>
</div>
Do the same again and this time add the<span> </span><strong>Scroll To</strong><span> </span>behavior, to make the screen follow the player. Then also add the<span> </span><strong>Bound to layout</strong><span> </span>behavior, to keep them inside the layout. The behaviors dialog should now look like this:
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1110/player-behaviors.png" rel="noopener" title="Open original 1109x727px in new window (37 KB)"><img class="jsEnabled loaded aligncenter" width="444" height="291" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1110/player-behaviors_v450.png" alt="Player behaviors list" /></a></div>
</div>
Close the behaviors dialog. Now try pressing<span> </span><strong>Preview</strong><span> </span>to run the game so far! Once the preview starts, notice you can already move around with the arrow keys, and the screen follows the player. You also can't walk outside the layout area, thanks to the Bound to Layout behavior. This is what behaviors are good for - quickly adding common features. We'll be using the event system soon to add custom features.
<h2>ADDING THE OTHER BEHAVIORS</h2>
We can add behaviors to the other objects by the same method - select it, click the<span> </span><em>Behaviors</em><span> </span>link to open the behaviors dialog, and add some behaviors. Let's add these other behaviors:
<ol class="list">
 	<li>Add the<span> </span><strong>Bullet movement</strong><span> </span>and<span> </span><strong>Destroy outside layout </strong>to the<span> </span><span style="color: #000000"><strong>Bullet</strong> object (no surprises there)</span></li>
 	<li><span style="color: #000000">Add the <strong>Bullet movement</strong> to the <strong>Monster</strong> object (because it just moves forwards as well, just at a slower speed)</span></li>
 	<li><span style="color: #000000">Add the <strong>Fade</strong> behavior to the <strong>Explosion</strong> object (so it gradually disappears after appearing). By default the Fade behavior also destroys the object after it has faded out, which also saves us having to worry about invisible Explosion objects clogging up the game.</span></li>
</ol>
<span style="color: #000000">If you run the game, you might notice the only thing different is any monsters you can see suddenly shoot off rather quickly. Let's slow them down to a leisurely pace. Select the <strong>Monster</strong> object. Notice how since we added a behavior, some extra properties have appeared in the properties bar:</span>
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1111/bullet-properties.png" rel="noopener" title="Open original 744x720px in new window (36 KB)"><img class="jsEnabled loaded aligncenter" width="298" height="288" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1111/bullet-properties_v300.png" alt="Bullet behavior properties" /></a></div>
</div>
This allows us to tweak how behaviors work. Change the speed from 400 to<span> </span><strong>80</strong><span> </span>(this is in pixels traveled per second).

Similarly, change the<span style="color: #000000"> <strong>Bullet</strong> object's speed to <strong>600</strong>, and the <strong>Explosion</strong> object's Fade behavior's <strong>Fade out time</strong> to <strong>0.5</strong>(that's half a second).</span>
<h2><span style="color: #000000">CREATE SOME MORE MONSTERS</span></h2>
<span style="color: #000000">Holding <kbd>Control</kbd>, click and drag the <strong>Monster</strong> object. You'll notice it creates another <em>instance</em>. This is simply another object of the Monster <em>object type</em>.</span>

<span style="color: #000000">Object types are essentially 'classes' of objects. In the event system, you mainly deal with object types. For example, you might make an event that says "Bullet collides with Monster". This actually means "<em>Any instance of the</em> Bullet <em>object type </em>collides with <em>any instance of the</em> Monster <em>object type</em>" - as opposed to having to make a separate event for each and every monster. We'll cover more on object types vs. instances later. For now, a good example to think about is different types of enemy are different object types, then the actual enemies themselves (which there might be several of) are instances of those object types.</span>

<span style="color: #000000">Using <kbd>Control</kbd> + drag, <strong>create 7 or 8 new monsters.</strong> </span>Don't place any too close to the player, or they might die straight away! Remember you can zoom out with<span> </span><kbd>Control</kbd><span> </span>+ mouse wheel down if it helps, and spread them over the whole layout. You should end up with something a bit like this.
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Monsters-positioned-in-the-layout.png" alt="Monsters positioned in the layout" width="666" height="377" class="aligncenter wp-image-1265" /></div>
</div>
Now it's time to add our custom logic with Construct's visual method of programming - events!
<h2>EVENTS</h2>
First, click the<span> </span><strong>Event sheet 1</strong><span> </span>tab at the top to switch to the<span> </span><em>Event Sheet View</em>. A list of events is called an<span> </span><em>Event sheet</em>, and you can have different event sheets for different parts of your game, or for organisation. Event sheets can also "include" other event sheets, allowing you to reuse events on multiple levels for example, but we won't need that right now.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1113/event-sheet-tab.png" rel="noopener" title="Open original 773x115px in new window (23 KB)"><img class="jsEnabled loaded aligncenter" width="309" height="46" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1113/event-sheet-tab_v310.png" alt="Event sheet tab" /></a></div>
</div>
<h3>ABOUT EVENTS</h3>
As the text in the empty sheet indicates, Construct runs everything in the event sheet once per tick. Most screens update their display 60 times per second, so Construct will try to match that for the smoothest display. This means the event sheet is usually run 60 times per second, each time followed by redrawing the screen. That's what a tick is - one unit of "run the events then draw the screen".

Events run top-to-bottom, so events at the top of the event sheet are run first.
<h3>CONDITIONS, ACTIONS AND SUB-EVENTS</h3>
Events consist of<span> </span><strong>conditions</strong>, which test if certain criteria are met, e.g. "Is spacebar down?". If all these conditions are met, the event's<span> </span><strong>actions</strong><span> </span>are all run, e.g. "Create a bullet object". After the actions have run, any<span> </span><strong>sub-events</strong><span> </span>are also run - these can then test more conditions, then run more actions, then more sub-events, and so on. Using this system, we can build sophisticated logic for our games and apps. We won't need sub-events in this tutorial, though.

Let's go over that again. In short, an event basically runs like this:

Are all conditions met?
<ul class="list">
 	<li><strong>Yes:</strong><span> </span>run all the event's actions.</li>
 	<li><strong>No:</strong><span> </span>go to next event (not including any sub-events).</li>
</ul>
That's a bit of an oversimplification. Construct provides a lot of event features to cover lots of different things you might need to do. However, for now, that's a good way to think about it.
<h3>YOUR FIRST EVENT</h3>
We want to make the player always look at the mouse cursor. It will look like this when we're done:
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/The-first-event1.png" alt="The first event" width="787" height="69" class="aligncenter wp-image-1306 size-full" /></div>
</div>
Remember a tick runs every time the screen is drawn, so if we make the player point at the mouse cursor position every tick, they'll always appear to be facing the mouse cursor.

Let's start making this event. Double-click a space in the event sheet. This will prompt us to add a<span> </span><strong>condition</strong><span> </span>for the new event.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1115/gstut-sysobj.png" rel="noopener" title="Open original 1293x977px in new window (143 KB)"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Creating-a-condition.png" alt="Creating a condition" width="463" height="349" class="aligncenter size-full wp-image-1285" /></a></div>
</div>
Different objects have different conditions and actions depending on what they can do. There's also the<span> </span><strong>System object</strong>, which represents Construct's built-in features.<span> </span><strong>Double-click</strong><span> </span>the System object as shown. The dialog will then list all of the System object's conditions:
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1116/gstut-everytick.png" rel="noopener" title="Open original 1445x1063px in new window (92 KB)"><img class="jsEnabled loaded aligncenter" width="578" height="425" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1116/gstut-everytick_v600.png" alt="System conditions" /></a></div>
</div>
<strong>Double-click</strong><span> </span>the<span> </span><em>Every tick</em><span> </span>condition to create an event with it. The dialog will close and the event is created, with no actions.

Now we want to add an action to make the player look at the mouse cursor. Click the<span> </span><strong>Add action</strong><span> </span>link to the right of the event. (Make sure you get the<span> </span><em>Add action</em><span> </span>link,<span> </span><strong>not</strong><span> </span>the<span> </span><em>Add event</em><span> </span>link underneath it which will add a whole different event again.) The Add Action dialog will appear:
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Creating-an-action-for-the-Player-object.png" alt="" width="465" height="351" class="aligncenter size-full wp-image-1286" /></div>
</div>
As with adding an event, we have our same list of objects to choose from, but this time for adding an action. Try not to get confused between adding conditions and adding actions! As shown,<span> </span><strong>double-click</strong><span> </span>the<span> </span><em>Player</em><span> </span>object, for it is the player we want to look at the mouse cursor. The list of actions available in the Player object appears:
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Player-object-actions.png" alt="Player object actions" width="795" height="571" class="aligncenter size-full wp-image-1296" /></div>
</div>
Notice how the player's 8-direction movement behavior has its own actions. We don't need to worry about that for now, though.

Rather than set the player's angle to a number of degrees, it's convenient to use the<span> </span><strong>Set angle towards position</strong><span> </span>action. This will automatically calculate the angle from the player to the given X and Y co-ordinate, then set the object's angle to that.<span> </span><strong>Double-click</strong><span> </span>the<span> </span><em>Set angle towards position</em><span> </span>action in the list.

Construct now needs to know the X and Y co-ordinate to point the player at:
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1119/gstut-paramsdlg.png" rel="noopener" title="Open original 1376x696px in new window (38 KB)"><img class="jsEnabled loaded aligncenter" width="550" height="278" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1119/gstut-paramsdlg_v550.png" alt="Parameters dialog" /></a></div>
</div>
The X and Y fields are called the<span> </span><strong>parameters</strong><span> </span>of the action. Conditions can have parameters too, but<span> </span><em>Every tick</em><span> </span>doesn't need any.

We want to set the angle towards the mouse position. The Mouse object can provide this. Enter<span> </span><code>Mouse.X</code><span> </span>for<span> </span><strong>X</strong>, and<span> </span><code>Mouse.Y</code><span> </span>for<span> </span><strong>Y</strong>. These are called<span> </span><em>expressions</em>. They're like sums that are calculated. For example, you could also enter<span> </span><code>Mouse.X + 100</code><span> </span>or<span> </span><code>sin(Mouse.Y)</code><span> </span>(although those particular examples might not be very useful!). This way you can use any data from any object, or any calculation, to work out parameters in actions and conditions. It's very powerful, and a sort of hidden source of much of Construct's flexibility.

<aside>
<div class="notice tip">

If you get an error that says "Mouse is not an object name", make sure you added the Mouse object! Go back and check under<span> </span><em>Add the input objects</em>.

</div>
</aside>You might be wondering how you'd remember all the possible expressions you could enter. Firstly, you might notice Construct shows some lists as you type. This is called<span> </span><em>autocomplete</em><span> </span>and helps show what you can type at each point in an expression. Secondly, there's also the<span> </span><em>Expressions Dictionary</em><span> </span>which lists them all. If there's room on your screen, it will appear faded out, so it doesn't distract you until you need it. If it's not there, you can click<span> </span><em>Find expressions</em><span> </span>to open it. You can double-click an object in the Expressions Dictionary to see a list of all its expressions. If you double-click an expression, it will also insert it for you, saving you from having to type it out.

Anyway, click<span> </span><strong>Done</strong><span> </span>on the parameters dialog. The action is added! As you saw before, it should look like this:
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1114/gstut-event1.png" rel="noopener" title="Open original 1389x136px in new window (24 KB)"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/The-first-event1.png" alt="The first event" width="787" height="69" class="aligncenter wp-image-1306 size-full" /></a></div>
</div>
There's your first event! Try running the game, and the player should now be able to move around as before, but always facing the mouse cursor. This is our first bit of custom logic.
<h2>MORE GAME LOGIC</h2>
If each event is described in as much detail as before, it's going to be quite a long tutorial. Let's make the description a little briefer for the next events. Remember, the steps to add a condition or action are:
<ol class="list">
 	<li>Double-click to insert a new event, or click an<span> </span><em>Add action</em><span> </span>link to add an action.</li>
 	<li>Double-click the object the condition/action is in.</li>
 	<li>Double-click the condition/action you want.</li>
 	<li>Enter parameters, if any are needed.</li>
</ol>
From now on, events will be described as the object, followed by the condition/action, followed by any parameters. For example, the event we have just inserted could be written:

Add condition<span> </span><span class="navWrap">System<span class="arr">►</span>Every tick</span>

Add action<span> </span><span class="navWrap">Player<span class="arr">►</span>Set angle towards position</span>, and for X:<span> </span><code>Mouse.X</code>, Y:<span> </span><code>Mouse.Y</code>
<h3>GET THE PLAYER TO SHOOT</h3>
When the player clicks, they should throw a snowball<span style="color: #000000">. This can be done with the <em>Spawn an object</em> action in Player, which creates a new instance of an object at the same position and angle. The Bullet movement we added earlier will then make it fly out forwards. Make the following event:</span>

<span style="color: #000000">Condition: <span class="navWrap">Mouse<span class="arr">►</span>On click<span class="arr">►</span>Left clicked</span> (the default)</span>

<span style="color: #000000">Action: <span class="navWrap">Player<span class="arr">►</span>Spawn another object</span>, then for <em>Object</em>, choose the <em>Bullet</em> object. Leave the other parameters as they are.</span>

Your event should now look like this:
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/The-event-to-shoot-a-bullet.png" alt="The event to shoot a bullet" width="867" height="75" class="aligncenter size-full wp-image-1315" /></div>
</div>
If you run the game, you can sho<span style="color: #000000">ot snowballs! However, you may notice the snowballs sho</span>ot from the middle of the player, rather than from the end of the gun. Let's fix that by placing an image point at the end of the gun. An image point is just a position on an image that you can spawn objects from, and we can reference it in the<span> </span><em>Spawn another object</em><span> </span>action.

<strong>Right-click</strong><span> </span>the player in the Project Bar and select<span> </span><strong>Edit animations</strong>.
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Editing-the-players-animations.png" alt="Editing the player's animations" width="292" height="113" class="aligncenter size-full wp-image-1325" /></div>
</div>
The image editor for the player reappears. Click the origin and image points tool:
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1122/imagepoints-tool.png" rel="noopener" title="Open original 472x267px in new window (19 KB)"><img class="jsEnabled loaded aligncenter" width="189" height="107" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1122/imagepoints-tool_v190.png" alt="The image points tool" /></a></div>
</div>
...and then the side pane turns in to a list of image points:
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1123/imagepoints-pane.png" rel="noopener" title="Open original 770x400px in new window (13 KB)"><img class="jsEnabled loaded aligncenter" width="308" height="160" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1123/imagepoints-pane_v310.png" alt="The image points pane" /></a></div>
</div>
Notice the object origin appears in the list. That's the "hotspot" or "pivot point" of the object. If you rotate the object, it spins around the origin. That's also what's used when you spawn an object at image point 0, as our action did. We want to add another image point to represent the gun, so<span> </span><strong>right-click</strong><span> </span>in the list and select<span> </span><span class="navWrap">Add a new image point</span>. A new item appears in the list, and an icon appears over the image to indicate where this image point is. Left-click at the end of the player's gun to place the image point there:
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Placing-the-image-point-300x222.png" alt="Placing the image point" width="184" height="136" class="aligncenter wp-image-1327 " /></div>
</div>
Close the image editor.<span> </span><strong>Double-click</strong><span> </span>the<span> </span><em>Spawn an object </em>action we added earlier, and change the<span> </span><em>Image point</em><span> </span>to<span> </span><code>1</code>. The event should now look like below - note it says<span> </span><em>Image point 1</em><span> </span>now:
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/The-event-to-shoot-a-bullet.png" alt="The event to shoot a bullet" width="705" height="61" class="aligncenter wp-image-1315" /></div>
</div>
Preview the game again. The snowballs now shoot from the end of your gun! They don't do anything yet, though. Hopefully, however, you'll start to realize that once you get the hang of the event system, you can put together your game's logic very quickly.

Let's make the snowballs explode the monster snowmen. Add the following event:

Condition:<span> </span><span class="navWrap">Bullet<span class="arr">►</span>On collision with another object<span class="arr">►</span>Monster</span>.

Action:<span> </span><span class="navWrap">Monster<span class="arr">►</span>Destroy</span>

Action:<span> </span><span class="navWrap">Bullet<span class="arr">►</span>Spawn another object<span class="arr">►</span>Explosion</span>

Action:<span> </span><span class="navWrap">Bullet<span class="arr">►</span>Destroy</span>

Here's what the finished event looks like.
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Bullet-collision-event.png" alt="Bullet collision event" width="570" height="132" class="aligncenter wp-image-1336" /></div>
</div>
<h3>THE EXPLOSION EFFECT</h3>
Preview the game, and try shooting a monster. Oops, the explosion has that big black border!
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Explosion-with-black-border.png" alt="Explosion with black border" width="250" height="231" class="aligncenter wp-image-1337" /></div>
</div>
You might have predicted it'd look like that from the start, and wondered if our game was really going to end up like that! Don't worry, it won't.<span> </span><strong>Click the Explosion object</strong><span> </span>in the Project Bar. Its properties appear in the Properties Bar on the left. In the<span> </span><em>Effects</em><span> </span>section, set its<span> </span><strong>Blend mode</strong><span> </span>to<span> </span><strong>Additive</strong>. Now try the game again.
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Explosion-with-additive-blend.png" alt="Explosion with additive blend" width="150" height="180" class="aligncenter wp-image-1347" /></div>
</div>
Why does this work? Without going too much in to the nuts and bolts, ordinary images are pasted on top of the screen. With the additive blend mode, each pixel is instead added (as in, summed) with the background pixel behind it. Black is a zero pixel value, so nothing gets added - you don't see the black background. Brighter colors add more, so appear more strongly. It's great for explosions and lighting effects.
<h3>MAKING MONSTERS A LITTLE SMARTER</h3>
Right now the monsters just wander off the layout to the right. Let's make them a bit more interesting. First of all, let's start them at a random angle.

Condition:<span> </span><span class="navWrap">System<span class="arr">►</span>On start of Layout</span>

Action:<span> </span><span class="navWrap">Monster<span class="arr">►</span>Set angle</span><span> </span>to<span> </span><code>random(360)</code>

They will still wander off forever when they leave the layout, never to be seen again. Let's keep them inside. What we'll do is point them back at the player when they leave the layout. This does two things: they always stay within the layout, and if the player stands still, monsters end up coming right for them!

Condition:<span> </span><span class="navWrap">Monster<span class="arr">►</span>Is outside layout</span>

Action:<span> </span><span class="navWrap">Monster<span class="arr">►</span>Set angle toward position</span><span> </span>X:<span> </span><code>Player.X</code>Y:<span> </span><code>Player.Y</code>

Here are what the two finished events look like.
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Monster-events.png" alt="Monster events" width="617" height="120" class="aligncenter wp-image-1355" /></div>
</div>
Run the game. If you hang around for a while, you'll notice the monsters stay around the layout too, and they're going in all kinds of directions. It's hardly AI, but it'll do!

<span>Now, suppose we want to have to shoot a monster more than once before it dies, rather than instant death like it is at the moment. How do we do that? If we only store one "Health" counter, then once we've hit a monster, all the monsters will die. Instead, we need </span><em>each</em><span> monster to remember its </span><em>own</em><span> health. We can do that with </span><strong>instance variables.</strong>
<h2>USING INSTANCE VARIABLES</h2>
Instance variables allow each monster to store its own health value. A variable is simply a value that can change (or<span> </span><em>vary</em>), and they are stored separately for each instance, hence the name<span> </span><em>instance variable</em>.

Lets add a<span> </span><em>health</em><span> </span>instance variable to our monster. This works somewhat similarly to adding a behavior. Click the monster in the Project Bar. Alternatively, you can switch back to the layout using the tabs at the top and select a monster object. This will show the monster's properties in the Properties Bar. Click<span> </span><strong>Instance variables</strong><span> </span>to open the Instance Variables dialog.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1130/instvars-dlg.png" rel="noopener" title="Open original 1760x707px in new window (89 KB)"><img class="jsEnabled loaded aligncenter" width="600" height="241" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1130/instvars-dlg_v600.png" alt="Editing instance variables" /></a></div>
</div>
You can add as many instance variables to an object as you like, but we only need one for the monster. Click<span> </span><strong>Add new instance variable</strong>. The following dialog appears for adding an instance variable.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1131/add-health-var.png" rel="noopener" title="Open original 1194x781px in new window (32 KB)"><img class="jsEnabled loaded aligncenter" width="478" height="313" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1131/add-health-var_v480.png" alt="Adding the Health instance variable" /></a></div>
</div>
Type<span> </span><em>Health</em><span> </span>for the name, leave<span> </span><em>Type</em><span> </span>as<span> </span><strong>Number</strong>, and for<span> </span><em>Initial value</em><span> </span>enter<span> </span><strong>5</strong><span> </span>(as shown). This starts every monster on 5 health. When they get hit we'll subtract 1 from the health, and then when health is zero we'll destroy the object.

Once you're done, click OK. Notice the variable now appears in the instance variables dialog and also in the properties for the monster as well. You can quickly change initial values in the properties bar, but to add or remove variables you'll need to open the instance variables dialog. Also note every object in the layout can have unique instance variable values set as well, so you could for example start every monster with a different amount of health.
<h3>CHANGING THE EVENTS</h3>
Switch back to the event sheet. Right now, we're destroying monsters as soon as the bullet hits them. Let's change that to subtract 1 from its health.

Find the event that reads<span> </span><em>Bullet: On collision with Monster</em>. Notice we've got a "destroy monster" action. Let's replace that with "subtract 1 from health". Right click the "destroy monster" action and click<span> </span><strong>Replace action</strong>.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1132/replace-action.png" rel="noopener" title="Open original 1640x421px in new window (70 KB)"><img class="jsEnabled loaded aligncenter" width="600" height="154" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1132/replace-action_v600.png" alt="Replacing an action" /></a></div>
</div>
The same dialog appears as if we were inserting a new action, but this time it'll replace the action we clicked instead. Choose<span> </span><span class="navWrap">Monster<span class="arr">►</span>Subtract from</span><span> </span>(in the<span> </span><em>Instance variables</em>category), choose the instance variable "health", and enter 1 for the value. Click<span> </span><strong>Done</strong>. The event should now look like this:
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1133/gstut-event5.png" rel="noopener" title="Open original 1638x278px in new window (57 KB)"><img class="jsEnabled loaded aligncenter" width="600" height="102" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1133/gstut-event5_v600.png" alt="Finished event with instance variable" /></a></div>
</div>
Now when we shoot monsters they lose 1 health and the bullet explodes, but we haven't made an event to kill monsters when their health reaches zero. Add another event:

Condition:<span> </span><span class="navWrap">Monster<span class="arr">►</span>Compare instance variable<span class="arr">►</span>Health, Less or equal, 0</span>

Action:<span> </span><span class="navWrap">Monster<span class="arr">►</span>Spawn another object<span class="arr">►</span>Explosion</span>

Action:<span> </span><span class="navWrap">Monster<span class="arr">►</span>Destroy</span>
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1134/gstut-event6.png" rel="noopener" title="Open original 1405x259px in new window (45 KB)"><img class="jsEnabled loaded aligncenter" width="562" height="104" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1134/gstut-event6_v600.png" alt="Event to destroy monsters" /></a></div>
</div>
Why "less or equal 0" rather than "equals 0"? Suppose we added another more powerful weapon which subtracted<span> </span><strong>2</strong>from health. As you shot a monster, its health would go<span> </span><strong>5, 3, 1, -1, -3...</strong><span> </span>notice at no point was its health directly<span> </span><em>equal to zero</em>, so it'd never die! Therefore, it's good practice to use "less or equal" to test if something's health has run out.

Run the game. You now have to hit monsters five times to kill them!

</div>
<h2>KEEPING SCORE</h2>
Let's have a score so the player knows how well they've done. We'll need a<span> </span><strong>global</strong> variable for this. Like an instance variable, a global variable (or just "global") can store text or a number. Each variable can store a single number or a single piece of text. Global variables are also available to the entire game across all layouts - convenient if we were to add other levels.

<strong>Right-click</strong><span> </span>the space at the bottom of the event sheet, and select<span> </span><span class="navWrap">Add global variable</span>.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1142/add-global.png" rel="noopener" title="Open original 463x549px in new window (20 KB)"><img class="jsEnabled loaded aligncenter" width="185" height="219" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1142/add-global_v190.png" alt="Adding a global variable" /></a></div>
</div>
Enter<span> </span><strong>Score</strong><span> </span>as the name. The other field defaults are OK, it'll make it a number starting at 0.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1143/adding-score.png" rel="noopener" title="Open original 1068x925px in new window (39 KB)"><img class="jsEnabled loaded aligncenter" width="427" height="370" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1143/adding-score_v430.png" alt="Adding a Score global variable" /></a></div>
</div>
Now the global variable appears as a line in the event sheet. It's in this event sheet, but it can be accessed from any event sheet in any layout.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1144/score-var.png" rel="noopener" title="Open original 1045x79px in new window (5 KB)"><img class="jsEnabled loaded aligncenter" width="418" height="32" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1144/score-var_v420.png" alt="The 'Score' global variable" /></a></div>
</div>
<aside>
<div class="notice tip">

Let's give the player a point for killing a monster. In our "Monster: health less or equal 0" event (when a monster dies), click <strong>Add action</strong>, and select <span class="navWrap">System<span class="arr">►</span>Add to</span> (under <em>Global &amp; local variables</em>), and choose <strong>Score</strong> with a value of <code>1</code>. Now the event should look like this:

</div>
</aside>
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1145/gstut-event7.png" rel="noopener" title="Open original 1451x325px in new window (52 KB)"><img class="jsEnabled loaded aligncenter" width="580" height="130" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1145/gstut-event7_v600.png" alt="Event adding to score" /></a></div>
</div>
Now the player has a score, which increases by 1 for every monster they kill - but they can't see their score! Let's show it to them with a text object.
<div>
<h2>DISPLAYING THE SCORE</h2>
To display the player's score, we'll use a<span> </span><strong>Text</strong><span> </span>object. However we want to display it on a fixed position on-screen. The view follows the player, and we don't want the score to disappear as the player walks away! To fix this, we'll need to add a new<span> </span><strong>layer</strong>.
<h3>ADDING A LAYER</h3>
Layouts can consist of multiple layers, which you can use to group objects. Imagine layers like sheets of glass stacked on top of each other, with objects painted on each sheet. It allows you to easily arrange which objects appear on top of others, and layers can be hidden, locked, have parallax effects applied, and more. We want our score to display on top of everything else, and also to stay in the same place on screen, so we can add a new layer to do this.

<aside>
<div class="notice tip">

Try not to confuse<span> </span><strong>layouts</strong><span> </span>and<span> </span><strong>layers</strong>. The words look quite similar.

</div>
</aside>Turn your attention to the<span> </span><strong>Layers bar</strong>. By default this is in the lower-right corner of the screen.
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1146/layers-bar.png" rel="noopener" title="Open original 823x438px in new window (10 KB)"><img class="jsEnabled loaded aligncenter" width="329" height="175" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1146/layers-bar_v330.png" alt="The Layers Bar" /></a></div>
</div>
You should see<span> </span><strong>Layer 0</strong><span> </span>in the list.

<aside>
<div class="notice tip">

Construct counts starting from zero, since it works better like that in programming.

</div>
</aside><strong>Right-click</strong><span> </span>in the Layers Bar and select<span> </span><span class="navWrap">Add layer at top</span>. (Be sure to add it at the top, not the bottom, because we want the score to display on top of everything else!) When you add it, you can immediately type in a name. Enter<span> </span><strong>HUD</strong>, which stands for Heads-Up Display - which is a term used for all the on-screen information.

Now,<span> </span><strong>make sure the 'HUD' layer is selected in the Layers Bar.</strong>This is important - the selected layer is the<span> </span><em>active layer</em>. All newly added objects are added to the active layer, so if it's not selected, we'll later accidentally add our Text object to the wrong layer. The active layer is shown in the status bar in the bottom-right corner of the Layout View - it's worth keeping an eye on.
<h3>PARALLAX</h3>
The HUD should always stay in the same place on the screen. By default, layers scroll as the view moves. To keep them on the screen, we can use the layer<span> </span><strong>Parallax</strong><span> </span>setting. Parallax allows different layers to scroll at different rates for a sort of semi-3D effect. If we set the parallax to zero, though, the layer won't scroll at all - ideal for a HUD.

Since you have the HUD layer selected, its properties should be showing in the Properties Bar. Set the<span> </span><strong>Parallax</strong><span> </span>property to<span> </span><strong>0 x 0</strong><span> </span>(that's zero on both the X and Y axes).
<div class="imgAlign">
<div class="imageWrapper"><a target="_blank" href="https://s1.construct.net/images/v321/uploads/articleuploadobject/0/images/1147/parallax-property.png" rel="noopener" title="Open original 839x801px in new window (54 KB)"><img class="jsEnabled loaded aligncenter" width="336" height="321" src="https://s1.construct.net/images/v321/r/uploads/articleuploadobject/0/images/1147/parallax-property_v340.png" alt="Editing the Parallax property to zero" /></a></div>
</div>
Now we have a layer where we can place objects that appear in a fixed place on-screen! However, we don't have any objects on it yet.
<h3>ADDING THE TEXT OBJECT</h3>
<strong>Switch back to the Layout View</strong><span> </span>using the tabs at the top. Make sure the HUD layer is selected in the Layers Bar, to ensure the Text object is added to the right layer.<span> </span><strong>Double-click</strong><span> </span>a space to add another object. This time pick the<span> </span><strong>Text </strong>object.

<aside>
<div class="notice tip">

Try not to confuse the<span> </span><strong>Text</strong><span> </span>object, which displays some text, with the<span> </span><strong>Text input</strong><span> </span>object, which is a box the user can type some text in to (e.g. for a form).

</div>
</aside>Place the Text object in the top left corner of the layout. It's going to be hard to see, so in the Properties Bar, make it bold, italic, brightly colored, and choose a larger font size. Resize it wide enough to fit a reasonable amount of text. It should look something like this:
<div class="imgAlign">
<div class="imageWrapper"><img src="https://msdnshared.blob.core.windows.net/media/2017/11/Text-object-in-the-layout.png" alt="Text object in the layout" width="470" height="82" class="aligncenter wp-image-1357" /></div>
</div>
<aside>
<div class="notice tip">

Text objects won't display any text in the game if they are too small to fit the first word inside their box. If you don't see any text appear, try resizing the Text object larger.

</div>
</aside>Switch back to the event sheet. Let's keep the text updated with the player's score. In the<span> </span><strong>Every tick</strong><span> </span>event we added earlier, add the action<span> </span><span class="navWrap">Text<span class="arr">►</span>Set text</span>.

Using the<span> </span><strong>&amp;</strong><span> </span>operator, we can convert a number to text and join it to another text string. So for the text, enter:

<code>"Score: " &amp; Score</code>

The first part (<code>"Score: "</code>) means the text will always begin with the phrase<span> </span><em>Score:</em>. Pre-defined text has to appear in double-quotes in expressions. The second part (<code>Score</code>) is the actual value of the Score global variable. The<span> </span><strong>&amp;</strong><span> </span>joins them together in to one piece of text.

Run the game, and shoot some monsters. Your score is displayed, and it stays at the same place on the screen!
<h2>FINISHING TOUCHES</h2>
We're nearly done. Let's add some final touches.

Firstly, let's have some monsters regularly spawning, otherwise once you've shot all the monsters there's nothing left to do. We'll create a new monster every 3 seconds. Add a new event:

Condition:<span> </span><span class="navWrap">System<span class="arr">►</span>Every X seconds<span class="arr">►</span>3</span>

Action:<span> </span><span class="navWrap">System<span class="arr">►</span>Create object</span>,<span> </span><strong>Monster</strong>, layer<span> </span><strong>0</strong><span> </span>(that's the main layer), X:<span> </span><code>LayoutWidth + 100</code>, Y:<span> </span><code>random(LayoutHeight)</code>

Note the position is a random place along the right edge of the layout. That's where monsters will come from. We also create them 100 pixels further to the right so the player can't see them suddenly appear at the edge, they will instead come in from the outside.

Finally, let's have ghosts kill the player.

Condition:<span> </span><span class="navWrap">Monster<span class="arr">►</span>On collision with another object<span class="arr">►</span>Player</span>

Action:<span> </span><span class="navWrap">Player<span class="arr">►</span>Destroy</span>
<h3>SOME IDEAS TO TRY</h3>
Want to go a bit further? Here are some ideas for some extra things to add:
<ul class="list">
 	<li>Make the player get points for hitting monsters as well as killing them. You can adjust the score gained for each case.</li>
 	<li>Make the monsters slowly speed up over time, so they're harder to hit and avoid.</li>
 	<li>Add another kind of enemy!</li>
 	<li>Add an alternative kind of weapon, which uses a different mouse button or keyboard control.</li>
 	<li>Add the Audio object, import some sound files, and add sound effects or music.</li>
 	<li>Add a title screen. Use the System object<span> </span><em>Go to layout</em>action to switch between them.</li>
 	<li>Introduce some scenery or obstacles in the level design.</li>
 	<li>Add a "Game over" screen, or make something else happen when the player dies.</li>
</ul>
<h2>CONCLUSION</h2>
Congratulations, you've made your first game in Construct! If you want to show off your work, use<span> </span><span class="navWrap">Menu<span class="arr">►</span>Project<span class="arr">►</span>Export</span>. You can publish to the Scirra Arcade, or upload to your own web server with the Web (HTML5) export. There are other platforms you can publish to, but you will need a<span> </span><a target="_blank" href="https://www.construct.net/make-games/buy-construct-3" rel="noopener" title="Go to https://www.construct.net/make-games/buy-construct-3">subscription</a><span> </span>to access the full features of Construct 3.

You've learned some important basics about Construct: adding objects, using behaviors, events, layers and more. Hopefully this should leave you well prepared to learn more about Construct!
<h3>THE FINISHED THING</h3>
<a target="_blank" href="https://editor.construct.net/#open=ghost-shooter-tut" rel="noopener" title="Go to https://editor.construct.net/#open=ghost-shooter-tut">Click here to open</a> a finished project for the <em>Ghost Shooter tutorial</em><span> </span>in the Start Page. It's the same top-down shooter concept with some extra features added in, like "Game over" text, different art assets, and monsters which gradually speed up. There are also lots of comments (simply notes you can add above events) describing how it works.

The goal of this blog post is to pass on technical knowledge and to make games development easier for beginners new to the world of programming. I hope that I’ve done a good job of Demystifying Construct 3!

If you have any requests for other game engines, or wish to share tips and tricks of your own, hit me up on Twitter at<span> </span><a href="https://www.twitter.com/Saelia">@Saelia</a>. Thanks for reading, and keep on building!!

</div>
</div>
</div>
</aside>]]></content:encoded>
    </item>
    <item>
      <title>Indie Dev Podcast - Sarah Sexton</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/indie-dev-podcast-sarah-sexton</link>
      <pubDate>Wed, 08 Nov 2017 05:36:39 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=1106</guid>
      <description><![CDATA[Increasing diversity in games and the STEM fields is my passion. I was honored to join Dave...]]></description>
      <content:encoded><![CDATA[<p style="text-align: center"><iframe width="560" height="315" src="https://www.youtube.com/embed/MqEPTbIYcm8" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p style="text-align: left">Increasing diversity in games and the STEM fields is my passion. <span>I was honored to join <a href="http://indiedevpodcast.com/episodes/episode-38-sarah-sexton-voxelles-builds-games/">Dave Voyles</a> </span><span>for an interview about who I am, what I do in my career and my community, and the website I use to transcribe mu interviews with women who build video games, </span><a target="_blank" href="http://www.shebuildsgames.com/" rel="noopener">www.shebuildsgames.com</a><span>. </span></p>
<p style="text-align: left">As an undergrad, I founded the <a href="http://www.cwu.edu/~alc/">Ada Lovelace Club for Women in Computer Science</a> at Central Washington University, which is still going strong today. I fund-raised and organized a club field trip to the <a href="https://ghc.anitab.org/">Grace Hopper Celebration</a> of women in computing Conference. Because of my professional and friendly attitude, I was hired at Microsoft as a <a href="https://www.youtube.com/watch?v=bJMuh0ZiDZQ">Technical Evangelist</a> soon after I graduated. This process also tested my ability to be flexible, understanding, and patient in a changing environment, because my in-person interviews (in Chicago) had to take place immediately after my semester finals!</p>
<p style="text-align: left">After moving to Chicago, I co-founded the <a href="http://voxelles.com/">Voxelles: Chicago's Women in Game Development</a>. I cherished opportunities to guest-lecture organizations like <a href="http://girlsmakegames.com/">Girls Make Games</a>, <a href="https://girlswhocode.com/">Girls Who Code</a>, and several high schools &amp; colleges about game development and tech.</p>
<p style="text-align: left">At last year's <a href="http://www.gdconf.com/">Game Developers Conference</a> (<a href="https://www.calounge.com/application.php">GDC</a>), I was accepted as an <a href="http://www.igda.org/">International Game Developers Association</a> <a href="http://www.igda.org/?page=gdc2017volunteer">(IGDA) volunteer</a>, where I provided support for the recruitment effort at their booth. The year before, I attended as a volunteer for Microsoft, and helped answer attendees' questions at the Xbox booth. Both years, I enthusiastically attended the <a href="https://www.microsoftstudios.com/news/2016/12/20/team-xbox-announces-17th-annual-women-gaming-luncheon/">Women in Gaming Luncheon</a> presented by Xbox. I have kept my in-person and online communication skills sharp as I organized <a href="https://www.meetup.com/ChiU3D/events/230173826/">roadshows with Unity in Chicago</a>, ran 4 game jams with the <a href="https://www.meetup.com/voxelles/">Voxelles</a>, and sponsored <a href="https://channel9.msdn.com/Blogs/raw-tech/GGJ2016start">Global Game Jam through Microsoft</a>.</p>
<p style="text-align: left">Like I said in the video interview with Dave, embedded above, <em>"I want all the girls who follow in my footsteps to believe that they are Strong Female Characters. They can be the protagonists of their own life video games."</em></p>]]></content:encoded>
    </item>
    <item>
      <title>Demystifying Ren'Py</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/demystifying-renpy</link>
      <pubDate>Thu, 19 Oct 2017 19:58:29 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=1066</guid>
      <description><![CDATA[Visual Novels
A visual novel is an interactive game style introduced in Japan in the early...]]></description>
      <content:encoded><![CDATA[<h1>Visual Novels</h1>
A <a href="https://en.wikipedia.org/wiki/Visual_novel"><b>visual novel</b></a> is an interactive game style introduced in Japan in the early 1990s,<span style="font-size: 13.3333px"> </span>featuring mostly static graphics, most often using <a href="https://en.wikipedia.org/wiki/Anime" title="Anime">anime</a>-style art or occasionally live-action stills (and sometimes video footage). As the name might suggest, they resemble mixed-media novels.

<span>Ren'Py is a cross-platform "Visual Novel" engine that runs on Python (hence the "Py"). It comes pre-packaged with a lot of the basic functionality of a standard visual novel: a menu system, dialog engine, and so on and so forth. It's completely free, even to sell and distribute the games you make with it, and you can build games for multiple platforms including mobile ones. It also uses a very simple scripting system that sort of looks like a screenplay, letting non-coders get started building out their games very quickly. You can also insert your own Python-based code to extend the functionality of the engine.</span>

<span>To see a cool game made with Ren'Py, check out </span><span><a target="_blank" href="http://scoutshonour.com/digital/" rel="noopener noreferrer"><em>Digital: A Love Story</em> by Christine Love</a>.</span>

Popular games made in "visual novel" style are the series of <span style="text-decoration: underline"><em>Phoenix Wright: Ace Attorney</em></span>, many Japanese interactive love stories, and the <span style="text-decoration: underline"><em>Professor Layton</em></span> game series.

<span>To get started, check out their quickstart guide at <a href="http://www.renpy.org/doc/html/quickstart.html">renpy.org/doc/html/quickstart.html</a></span><span><a target="_blank" href="http://www.renpy.org/doc/html/quickstart.html" rel="noopener noreferrer">.</a></span><span> </span><span></span>
<h2>How to install the tools:</h2>
<a href="https://www.renpy.org/latest.html">https://www.renpy.org/latest.html</a>

<a href="https://www.renpy.org/latest.html"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/renpy_download-1024x878.png" alt="Download" width="1024" height="878" class="aligncenter size-large wp-image-1076" /></a>
<ol>
 	<li>You only need to download one of these three files.</li>
 	<li>Each contains the full Ren'Py software development kit, with everything needed to develop Ren'Py games for Windows XP and up, Mac OS X 10.6 and up, and Linux x86/x86_64.</li>
 	<li>The development environment contains the files needed to produce games for all three platforms, the Ren'Py tutorial, and "The Question", an example game.</li>
 	<li>Ren'Py is free to download and use for commercial and non-commercial purposes. It may be modified and distributed under the terms of its<span> </span><a href="https://www.renpy.org/doc/html/license.html">license</a>.</li>
</ol>
<h2>Using the Ren'Py Quickstart:</h2>
<a href="https://www.renpy.org/doc/html/quickstart.html">https://www.renpy.org/doc/html/quickstart.html</a>

<a href="https://www.renpy.org/doc/html/quickstart.html"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/renpy_quickstart-1024x878.png" alt="Ren'Py Quickstart" width="1024" height="878" class="aligncenter size-large wp-image-1095" /></a>
<h2>What is Ren'Py?</h2>
<a href="https://www.renpy.org/">https://www.renpy.org/</a>

<a href="https://www.renpy.org/"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/renpy_org-1024x878.png" alt="What is Ren'Py?" width="1024" height="878" class="aligncenter size-large wp-image-1086" /></a>
<h1><a href="https://developer.microsoft.com/en-us/windows/holographic/academy"></a>Sample Code</h1>
<h3>Writing Dialog</h3>
<pre><span style="color: #008000"># A <strong>label</strong> statement names a place in the program.</span>
<span style="color: #008000"># In this case, we're naming a place "start." </span>
<span style="color: #008000"># The "start" label marks the place a game begins running.</span>

label start:

 <span style="color: #808080">"Wow, it's really dark in here."</span>

<span style="color: #008000"># A <strong>say</strong> statement begins and ends with a double-quote.</span>
<span style="color: #008000"># To include a double-quote (") in a string, type \".</span>
<span style="color: #008000"># A single string on a line by itself is said by the narrator.</span>

 <span style="color: #808080">"Lucy" "Better watch out."</span>
 l <span style="color: #808080">"You don't want to be eaten by a Grue."</span>

<span style="color: #008000"># Two strings separated by a space means the first string is</span>
<span style="color: #008000"># used as a character's name, and the second is their message.</span>
<span style="color: #008000"># This 2-argument form of the <strong>say</strong> statement is used for dialog,</span>
<span style="color: #008000"># where a character is speaking out loud.</span>

<span style="color: #008000"># Preserve the spacing before lines, aka indentation. </span>
<span style="color: #008000"># Indentation is used to group lines of script into blocks.</span>

<span style="color: #008000"># Here's an example Character definition:</span>

define l = Character(_(<span style="color: #808080">"Lucy"</span>), color=<span style="color: #808080">"#ffcccc"</span>)

<span style="color: #008000"># Begins with the word "define," signifying we are defining something.</span>
<span style="color: #008000"># Define is followed by a short name for the character, like "l."</span>
<span style="color: #008000"># We'll be able to use that short name when writing dialog.</span>
<span style="color: #008000"># This is followed by an <strong>=</strong> and the thing we're defining: a Character.</span>
<span style="color: #008000"># Short names are case-sensitive. Capital L is a different name</span>
<span style="color: #008000"># from lower-case l, so you'll need to be careful about that.</span></pre>
<h3>Adding Images</h3>
<pre><span style="color: #008000"># Before showing images, first put the image files in the game directory.</span>
<span style="color: #008000"># They should be placed at the start of the file, with no indentation.</span>

image bg cave <span style="color: #000080"><strong>=</strong></span> <span style="color: #808080">"cave.jpg"</span>
image lucy happy <span style="color: #000080"><strong>=</strong></span> <span style="color: #808080">"lucy_happy.png"</span>
image lucy mad <span style="color: #000080"><strong>=</strong></span> <span style="color: #808080">"lucy_mad.png"</span>

<span style="color: #008000"># Here are some sample image definitions. They should be placed at </span>
<span style="color: #008000"># the start of the file, without any indentation.</span>
<span style="color: #008000"># Keyword <strong>image</strong>, followed by an image name (a space-separated list of words).</span>
<span style="color: #008000"># The first word in the image name is the image tag. </span>
<span style="color: #008000"># For the first image, the tag is "bg," and for others, it's "lucy."</span>

label start:

 scene bg cave
 show lucy happy

 l <span style="color: #808080">"Now that the lights are on..."</span>

 show lucy mad at right

 l <span style="color: #808080">"What's the big idea?!"
</span>
<span style="color: #008000"># Two new statements: the <strong>scene</strong> and <strong>show</strong> statement.</span>
<span style="color: #008000"># The <strong>scene</strong> statement clears the screen, then adds a background image.</span>
<span style="color: #008000"># The <strong>show</strong> statement adds a background image on top of all other images.</span>
<span style="color: #008000"># If there was already an image with the same tag, the new image</span>
<span style="color: #008000"># would be used to replace the old one.</span>
<span style="color: #008000"># The second show statement has an <strong>at</strong> clause, which gives a location.</span>
<span style="color: #008000"># Common locations are left, right, and center, but you can define more.</span>

 show logo base at logopos behind eileen
<span style="color: #008000"># This shows an image named logo base, shown at a user-defined position.</span>
<span style="color: #008000"># It is also specified to be shown behind another image, eileen.</span>
 
 hide logo
<span style="color: #008000"># This is the <strong>hide</strong> statement, which hides the image with the given tag.</span>
<span style="color: #008000"># The <strong>show</strong> statement replaces an image.</span>
<span style="color: #008000"># The <strong>scene</strong> statement clears the screen.</span>
<span style="color: #008000"># The <strong>hide</strong> statement is used when something leaves before scene is over.</span></pre>
<h3>Transitions</h3>
<pre><span style="color: #008000"># Here's some sample code showing how we include transitions in-game.</span>

 scene bg whitehouse
 <span style="color: #0000ff"><strong>with</strong> </span>Dissolve<span style="color: #000080"><strong>(</strong></span><span style="color: #ff0000">.5</span><span style="color: #000080"><strong>)</strong></span>

 pause <span style="color: #ff0000">.5</span>

 scene bg washington
 show eileen happy
 <span style="color: #0000ff"><strong>with</strong> </span>Dissolve<strong><span style="color: #000080">(</span></strong><span style="color: #ff0000">.5</span><span style="color: #000080"><strong>)</strong></span>

<span style="color: #008000"># This uses the <strong>with</strong> statement. The <strong>with</strong> statement causes the scene to </span>
<span style="color: #008000"># transition from the last things shown to the things currently shown.</span>
<span style="color: #008000"># It takes a transition as an argument (in this case, Dissolve).</span>
<span style="color: #008000"># This transition takes an argument of an amount of time.</span>
<span style="color: #008000"># In this case, each transition takes half a second (.5).</span>

define slowdissolve <span style="color: #000080"><strong>=</strong></span> Dissolve(<span style="color: #ff0000">1.0</span>)

<span style="color: #008000"># Define a short name for a transition using a define statement.</span> 

 scene bg whitehouse
 <span style="color: #0000ff"><strong>with</strong> </span>slowdissolve

 scene bg washington
 show eileen happy
 <span style="color: #0000ff"><strong>with</strong> </span>slowdissolve

<span style="color: #008000"># Ren'Py defines some transitions for you, like Dissolve, Fade, &amp; Move.</span></pre>
<h3>Music and Sound</h3>
<pre><span style="color: #008000"># Ren'Py breaks up sound into channels. The channel a sound is played on</span>
<span style="color: #008000"># determines if the sound loops or if it's saved &amp; restored with the game.</span>
<span style="color: #008000"># When a sound is played on the music channel, it is looped &amp; saved.</span>
<span style="color: #008000"># When played on the sound channel, it is played once and then stopped.</span>
<span style="color: #008000"># Ren'Py supports the Ogg Vorbis, mp3, mp2, and wav file formats.</span>

 play music <span style="color: #808080">"sunflower-slow-drag.ogg"</span> fadeout <span style="color: #ff0000">1</span>
 queue music <span style="color: #808080">"sunflower-slow-drag.ogg"</span>

<span style="color: #008000"># The <strong>play music</strong> command replaces the currently playing music, </span>
<span style="color: #008000"># and replaces it with the named filename.</span>
<span style="color: #008000"># If you specify the currently playing song, it will restart it.</span>
<span style="color: #008000"># The <strong>fadeout</strong> clause fades out the current music before starting new music. </span>
<span style="color: #008000"># The <strong>queue</strong> statement also adds music to the named channel, but it waits</span>
<span style="color: #008000"># until the currently playing song is finished before playing new music.</span>

 stop music fadeout <span style="color: #ff0000">1</span>
<span style="color: #008000"># The third statement is the <strong>stop</strong> statement. It stops the music playing</span>
<span style="color: #008000"># on a channel. It also takes the fadeout clause.</span> 

 play sound <span style="color: #808080">"tower_clock.ogg"</span>
<span style="color: #008000"># The sound channel causes it to play only once.</span> 

 queue sound <span style="color: #808080">"tower_clock.ogg"</span>
 queue sound <span style="color: #808080">"tower_clock.ogg"</span>
 queue sound <span style="color: #808080">"tower_clock.ogg"</span>
<span style="color: #008000"># You can queue up multiple sounds on the sound channel, </span>
<span style="color: #008000"># but they will only play one at a time.</span>
<span style="color: #008000"># Ren'Py has separate mixers for sound, music, and voices.</span></pre>
<h3>In-Game Menus and Python</h3>
<pre><span style="color: #008000"># Menus are introduced by the <strong>menu</strong> block statement.</span>
<span style="color: #008000"># The <strong>menu</strong> statement takes an indented block, in which</span>
<span style="color: #008000"># each line must contain a choice in quotes.</span>
<span style="color: #008000"># The choices must end with a colon, as each choice has its</span>
<span style="color: #008000"># own block of Ren'Py code run when that choice is selected.</span>

menu<span style="color: #000080"><strong>:</strong></span>
 <span style="color: #808080">"Yes, I do."</span><span style="color: #000080"><strong>:</strong></span>
  jump choice1_yes
 <span style="color: #808080">"No, I don't."</span><strong><span style="color: #000080">:</span></strong>
  jump choice1_no

<span style="color: #008000"># Here, each block jumps to a label. While you could put small</span>
<span style="color: #008000"># amounts of Ren'Py code inside a menu label, it's probably a </span>
<span style="color: #008000"># best practice to usually jump to a bigger block of code. </span>
<span style="color: #008000"># See three labels here: choice1_yes, choice1_no, choice1_done.</span>
<span style="color: #008000"># When the first menu is picked, we jump to choice1_yes,</span>
<span style="color: #008000"># which runs 2 lines of script before jumping to choice1_done.</span>

label choice1_yes<strong><span style="color: #000080">:</span></strong>
 $ menu_flag <span style="color: #000080"><strong>=</strong></span> <span style="color: #0000ff"><strong>True</strong></span>
 e <span style="color: #808080">"While creating a multi-path game can be a bit more work..."</span>
 jump choice1_done

<span style="color: #008000"># Picking the second option jumps to choice1_no.</span>
<span style="color: #008000"># Lines that start with $ are Python used to set a flag</span>
<span style="color: #008000"># based on the user's choice. The flag is named menu_flag.</span>
<span style="color: #008000"># menu_flag is set to True orFalse based on the user's choice.</span>
<span style="color: #008000"># if statements can be used to test a flag, </span>
<span style="color: #008000"># so the game can remember the user's choices.</span>

label choice1_no<strong><span style="color: #000080">:</span></strong>
 $ menu_flag <span style="color: #000080"><strong>=</strong></span> <strong><span style="color: #0000ff">False</span></strong>
 e <span style="color: #808080">"Games without menus are called kinetic novels..."</span>
 jump choice1_done

label choice1_done:
<span style="color: #008000"> # ... the game continues here.</span>

<span style="color: #008000"># Here's an example that shows how we can test a flag,</span>
<span style="color: #008000"># and do different things if it's true or not.</span> 

<span style="color: #0000ff"><strong>if</strong> </span>menu_flag<span style="color: #000080"><strong>:</strong></span>
 e <span style="color: #808080">"For example, I remember that you plan to use menus"</span>
<strong><span style="color: #0000ff">else</span></strong><span style="color: #000080"><strong>:</strong></span> 
 e <span style="color: #808080">"For example, I remember that you're not using menus"</span></pre>
<h3>Screen Positions</h3>
There are 2 kinds of numbers to remember: <strong>integers</strong> and <strong>float</strong>ing point numbers.
Integers are whole numbers. Floating point numbers have decimal points.
100 is an integer. 0.5 is a floating point number, or float for short.
0 is an integer, and 0.0 is a float.

The "<strong>origin</strong>" is the upper-left corner of the screen. That's where the x position (xpos) and the y position (ypos) are both at zero.
An xpos of 0.5 means half the width across the screen.
Increasing xpos to 1.0 moves us to the right-top border of the screen.
Changing the ypos to 0.5 moves halfway down the screen.
A ypos of 1.0 specifies a position at the bottom of the screen.

The <strong>anchor</strong> is a spot on a thing being positioned.
xanchor of 0.0, yanchor of 0.0 is the upper-LEFT corner of an image.
xanchor of 1.0, yanchor of 0.0 is the upper-RIGHT corner of an image.
xanchor of 1.0, yanchor of 1.0 is the LOWER-right corner of an image.
xanchor of 0.0, yanchor of 1.0 is the lower-left corner of an image.

To place an image on the screen, we need both the <strong>position</strong> and <strong>anchor</strong>.
It's useful to set xpos and xanchor to the same value: <strong>xalign</strong>.
When we set xalign to 0.0, things are aligned to left center screen.
When we set xalign to 1.0, things are aligned to right center screen.
Set xalign to 0.5 to align an image to the exact center of the screen.
Setting <strong>yalign</strong> is similar, except along the y-axis.
<h3>Animation and Transformation</h3>
<pre><span style="color: #008000"># Moving images around the screen is called a Transform.</span>
<span style="color: #008000"># Animation and Transformation Language (ATL) does this in Ren'Py.</span>
<span style="color: #008000"># Animation is when the displayable being shown changes, like below:</span> 

image eileen animated:
 <span style="color: #808080">"eileen vhappy"</span>
 pause <span style="color: #ff0000">.5</span>
 <span style="color: #808080">"eileen happy"</span>
 pause <span style="color: #ff0000">.5</span>
 repeat
<span style="color: #008000"># (You can only have one repeat statement per block.)</span>
<span style="color: #008000"># The first place ATL can be used is as part of an image statement. </span>
<span style="color: #008000"># Instead of a 'displayable,' an image may be defined as ATL code.</span>
<span style="color: #008000"># When used this way, be sure ATL includes displayables to actually show.</span>

transform topright:
 xalign <span style="color: #ff0000">1.0</span> yalign <span style="color: #ff0000">0.0</span>

<span style="color: #008000"># The 2nd way is through the transform statement. This assigns the ATL</span>
<span style="color: #008000"># block of code to a python variable, allowing it to be used in and </span>
<span style="color: #008000"># at clauses and inside other transforms.</span> 

 show logo base:
  xalign <span style="color: #ff0000">.3</span> yalign <span style="color: #ff0000">.7</span>
  linear <span style="color: #ff0000">1.0</span> xalign <span style="color: #ff0000">.7</span> yalign <span style="color: #ff0000">.3</span>
  linear <span style="color: #ff0000">1.0</span> xalign <span style="color: #ff0000">.3</span> yalign <span style="color: #ff0000">.7</span>
  repeat
<span style="color: #008000"># Thirdly, an ATL block can be used as part of a show statement.</span></pre>
Transformation involves moving or distorting an image. This includes: placing it on the screen, zooming in &amp; out, rotating, and changing its opacity. This can make it disappear and reappear.
<pre>image eileen animated twice<span style="color: #000080"><strong>:</strong></span>
 <span style="color: #808080">"eileen vhappy"</span>
 pause <span style="color: #ff0000">.5</span>
 <span style="color: #808080">"eileen happy"</span>
 pause <span style="color: #ff0000">.5</span>
 repeat <span style="color: #ff0000">2</span>
<span style="color: #008000"># Writing 'repeat 2' makes the animation loop twice, then stop.</span>

image eileen animated once<span style="color: #000080"><strong>:</strong></span>
 <span style="color: #808080">"eileen vhappy"</span>
 pause <span style="color: #ff0000">.5</span>
 <span style="color: #808080">"eileen happy"</span>
<span style="color: #008000"># Omitting the repeat statement makes the animation stop after the end.</span>

image bg atl transitions<span style="color: #000080"><strong>:</strong></span>
 <span style="color: #808080">"bg washington"</span> <span style="color: #0000ff"><strong>with</strong></span> dissolve
 pause <span style="color: #ff0000">1.0</span>
 <span style="color: #808080">"bg whitehouse"</span> <span style="color: #0000ff"><strong>with</strong></span> dissolve
 pause <span style="color: #ff0000">1.0</span>
 repeat
<span style="color: #008000"># Displayables are replaced instantaneously. We can use a 'with' clause</span>
<span style="color: #008000"># to give a transition between displayables.</span> 

transform move_jump<span style="color: #000080"><strong>:</strong></span>
 xalign <span style="color: #ff0000">1.0</span> yalign <span style="color: #ff0000">0.0</span>
 pause <span style="color: #ff0000">1.0</span>
 xalign <span style="color: #ff0000">0.0</span>
 pause <span style="color: #ff0000">1.0</span>
 repeat
<span style="color: #008000"># This code starts the image off at the top-right of the screen, </span>
<span style="color: #008000"># waits one second, then moves it to the left side, waits 1 sec. Repeat.</span></pre>
The <strong>interpolation </strong>statement allows you to smoothly vary the value of a transform property, from an old value to a new value.
<pre>transform move_slide<span style="color: #000080"><strong>:</strong></span>
 xalign <span style="color: #ff0000">1.0</span> yalign <span style="color: #ff0000">0.0</span>
 linear <span style="color: #ff0000">3.0</span> xalign <span style="color: #ff0000">0.0</span>
 pause <span style="color: #ff0000">1.0</span>
 repeat</pre>
It starts off with the name of a time function, in this case, <strong>linear</strong>. That's followed by an amount of time, in this case, <strong>3</strong> seconds. It ends with a list of properties, each followed by its new value.
The old value of the transform property is the start of the statement. By interpolating the property over time, we change things on the screen.
<pre> show bg band<span style="color: #000080"><strong>:</strong></span>
  xpos <span style="color: #ff0000">0</span> ypos -<span style="color: #ff0000">222</span> xanchor <span style="color: #ff0000">0</span> yanchor <span style="color: #ff0000">0</span>
  linear <span style="color: #ff0000">5.0</span> xpos -<span style="color: #ff0000">435</span> ypos <span style="color: #ff0000">0</span>

<span style="color: #008000"># Along with xalign and yalign, Ren'Py supports the xpos, ypos, </span>
<span style="color: #008000"># xanchor, and yanchor properties. </span>
<span style="color: #008000"># We can pan around an image by using xpos and ypos to position images</span>
<span style="color: #008000"># off of the screen. This usually means giving them negative positions.</span>

 show logo base<span style="color: #000080"><strong>:</strong></span>
  zoom <span style="color: #ff0000">1.0</span>
  linear <span style="color: #ff0000">1.0</span> zoom <span style="color: #ff0000">1.5</span>
  linear <span style="color: #ff0000">1.0</span> zoom <span style="color: #ff0000">1.0</span>
  repeat
<span style="color: #008000"># The <strong>zoom</strong> property lets us scale the displayable by a factor, making it</span>
<span style="color: #008000"># bigger and smaller. Zoom should always be greater than 0.5.</span>

 show logo base<span style="color: #000080"><strong>:</strong></span>
  xzoom <span style="color: #ff0000">0.75</span> yzoom <span style="color: #ff0000">1.25</span>
  linear <span style="color: #ff0000">1.0</span> xzoom <span style="color: #ff0000">1.25</span> yzoom <span style="color: #ff0000">0.75</span>
  linear <span style="color: #ff0000">1.0</span> xzoom <span style="color: #ff0000">0.75</span> yzoom <span style="color: #ff0000">1.25</span>
  repeat
<span style="color: #008000"># The <strong>xzoom</strong> and <strong>yzoom</strong> properties allow the displayable to be scaled </span>
<span style="color: #008000"># in the X and Y directions independently (squashed and stretched).</span>

 show logo base<strong><span style="color: #000080">:</span></strong>
  size (<span style="color: #ff0000">300</span>, <span style="color: #ff0000">450</span>)

<span style="color: #008000"># The <strong>size</strong> property can set a size, in pixels, to scale the displayable.</span>

 show logo base<span style="color: #000080"><strong>:</strong></span>
  alpha <span style="color: #ff0000">1.0</span>
  linear <span style="color: #ff0000">1.0</span> alpha <span style="color: #ff0000">0.0</span>
  linear <span style="color: #ff0000">1.0</span> alpha <span style="color: #ff0000">1.0</span>
  repeat
<span style="color: #008000"># The <strong>alpha</strong> property varies the opacity of a displayable.</span>

 show logo base<span style="color: #000080"><strong>:</strong></span>
  xpos <span style="color: #ff0000">0.5</span> ypos <span style="color: #ff0000">0.5</span> xanchor <span style="color: #ff0000">0.5</span> yanchor <span style="color: #ff0000">0.5</span>
  rotate <span style="color: #ff0000">0</span>
  linear <span style="color: #ff0000">4.0</span> rotate <span style="color: #ff0000">360</span>
  repeat
<span style="color: #008000"># The <strong>rotate</strong> property lets us rotate a displayable.</span></pre>
Since rotation can change the size, you should set x anchor and y anchor to 0.5 when positioning a rotated displayable.
<pre> show bg washington<span style="color: #000080"><strong>:</strong></span>
  crop (<span style="color: #ff0000">0</span>, <span style="color: #ff0000">0</span>, <span style="color: #ff0000">800</span>, <span style="color: #ff0000">600</span>)
  size (<span style="color: #ff0000">800</span>, <span style="color: #ff0000">600</span>)
 
  linear <span style="color: #ff0000">4.0</span> crop (<span style="color: #ff0000">350</span>, <span style="color: #ff0000">300</span>, <span style="color: #ff0000">400</span>, <span style="color: #ff0000">300</span>)

<span style="color: #008000"># The <strong>crop</strong> property crops a rectangle out of a displayable, showing only</span>
<span style="color: #008000"># part of it. When used together, they can be used to focus in on </span>
<span style="color: #008000"># specific parts of an image.</span> 

 show eileen happy<span style="color: #000080"><strong>:</strong></span>
  right
  pause <span style="color: #ff0000">1.25</span>
  left
  pause <span style="color: #ff0000">1.25</span>
  repeat
<span style="color: #008000"># We can use <strong>left</strong>, <strong>right</strong>, and <strong>center</strong> inside of an ATL block of code.</span>

 show logo base<span style="color: #000080"><strong>:</strong></span>
  xalign <span style="color: #ff0000">0.0</span> yalign <span style="color: #ff0000">0.0</span>
  block<span style="color: #000080"><strong>:</strong></span>
   linear <span style="color: #ff0000">1.0</span> xalign <span style="color: #ff0000">1.0</span>
   linear <span style="color: #ff0000">1.0</span> xalign <span style="color: #ff0000">0.0</span>
   repeat
  time <span style="color: #ff0000">11.5</span>
  linear <span style="color: #ff0000">0.5</span> xalign <span style="color: #ff0000">1.0</span></pre>
The <strong>block</strong> statement allows you to include a block of ATL code.
Since the <strong>repeat</strong> statement applies to blocks, this lets you repeat only part of an ATL transform.
The <strong>time</strong> statement runs after the given number of seconds have elapsed from the start of the block. It will run even if another statement is running, stopping the other statement.
This code will bounce the image back and forth for 11.5 seconds, and then move back to the right side of the screen.
<pre> show logo base<span style="color: #000080"><strong>:</strong></span>
  parallel<span style="color: #000080"><strong>:</strong></span>
   linear <span style="color: #ff0000">1.0</span> xalign <span style="color: #ff0000">0.0</span>
   linear <span style="color: #ff0000">1.0</span> xalign <span style="color: #ff0000">1.0</span>
   repeat
  parallel<strong><span style="color: #000080">:</span></strong>
   linear <span style="color: #ff0000">1.3</span> yalign <span style="color: #ff0000">1.0</span>
   linear <span style="color: #ff0000">1.3</span> yalign <span style="color: #ff0000">0.0</span>
   repeat
<span style="color: #008000"># The <strong>parallel</strong> statement runs two blocks of ATL code at the same time.</span>
<span style="color: #008000"># Here, the top block moves the image in the horizontal direction, and</span>
<span style="color: #008000"># the bottom block moves it in the vertical direction. </span>
<span style="color: #008000"># Since they're moving at different speeds, it looks like the image</span>
<span style="color: #008000"># is bouncing on the screen.</span> 

 show logo base<strong><span style="color: #000080">:</span></strong>
  choice<span style="color: #000080"><strong>:</strong></span>
   linear <span style="color: #ff0000">1.0</span> xalign <span style="color: #ff0000">0.0</span>
  choice<span style="color: #000080"><strong>:</strong></span> 
   linear <span style="color: #ff0000">1.0</span> xalign <span style="color: #ff0000">1.0</span>
   repeat
<span style="color: #008000"># The <strong>choice</strong> statement makes Ren'Py randomly pick a block of ATL code.</span></pre>
This allows you to add some variation as to what Ren'Py shows.
<h1>MiniGames</h1>
You may want to mix Ren'Py with other forms of gameplay. There are many ways to do this. The first is with the UI functions, which can be used to create powerful button- and menu-based interfaces. These are often enough for many simulation-style games.

We also have two more ways in which Ren'Py can be extended. Both require experience with Python programming, and so aren't for the faint of heart. Renpygame is a library that allows pygame games to be run inside Ren'Py. When using renpygame, Ren'Py steps out of the way and gives you total control over the user's experience. You can get renpygame from the Frameworks page of the Ren'Py website.

If you want to integrate your code with Ren'Py, you can write a user-defined displayable. User-defined displayables are somewhat more limited, but integrate better with the rest of Ren'Py. For example, one could support loading and saving while a user-defined displayable is shown. (Be careful about putting minigames in a visual novel, since not every visual novel player wants to be good at arcade games.)

For help and discussion, check out the <a href="https://lemmasoft.renai.us/forums/">Lemma Soft Forums</a>. (<a href="https://lemmasoft.renai.us/forums/">https://lemmasoft.renai.us/forums/</a>)

Enjoy!
Sarah Sexton | Technical Evangelist | Twitter: <a target="_blank" href="http://twitter.com/saelia" rel="noopener noreferrer">@Saelia</a>]]></content:encoded>
    </item>
    <item>
      <title>Demystifying GameMaker Studio</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/demystifying-gamemaker-studio</link>
      <pubDate>Wed, 18 Oct 2017 21:01:45 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=705</guid>
      <description><![CDATA[GameMaker Studio is a free, code-optional game engine. It creates 2-Dimensional games and is a...]]></description>
      <content:encoded><![CDATA[GameMaker Studio is a free, code-optional game engine. It creates 2-Dimensional games and is a well-documented tool that has been a staple in the independent games community for many years. The engine is robust, and a lot of well-known indie games have been made in it, such as <a href="http://www.spelunkyworld.com/"><em>Spelunky</em> by Mossmouth</a> and <a href="http://www.undertale.com"><em>Undertale</em> by Toby Fox</a>. This Integrated Development Environment (IDE) includes an object editor for structuring workflow, a tabbed script editor, drag-and-drop features to enable game creation without going near code (hence the phrase “code-optional”), an extensive library of events and actions, and code preview tools for the GameMaker programming language (GML), based on C.

To get started making 2D games on a PC right away, just look up “GameMaker Studio Yoyo Games” or visit <a href="http://yoyogames.com">http://yoyogames.com</a>. Follow along to go to the website, download GameMaker, install it, and then create a new project!

[caption id="attachment_715" align="alignnone" width="1024"]<a href="http://yoyogames.com"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/011-1024x719.png" alt="Screenshot of yoyogames.com as of October 2017" width="1024" height="719" class="size-large wp-image-715" /></a> Screenshot as of October 2017[/caption]
<h2>Installing the Tools</h2>
GameMaker Studio (GMS) is designed for use on desktop computers with the following minimum specifications:
<h3>Windows</h3>
<ul>
 	<li>For the Windows platform, you will need to have the following minimum setup:
<ul>
 	<li>64bit Intel compatible Dual Core CPU</li>
 	<li>2GB RAM</li>
 	<li>DX11 compliant graphics card</li>
 	<li>Microsoft 64bit Windows 7 or higher</li>
 	<li>At least 3GB free Hard Disk space</li>
</ul>
</li>
 	<li>However, the recommended specifications are:
<ul>
 	<li>64bit Intel compatible Quad core CPU</li>
 	<li>8GB RAM</li>
 	<li>DX11 based graphics card</li>
 	<li>Microsoft 64bit Windows 10</li>
 	<li>SSD Hard Disk</li>
</ul>
</li>
</ul>
<h3>Mac OS</h3>
<ul>
 	<li>For the Mac OS platform, you will need to have the following minimum specs:
<ul>
 	<li>Mac OSX El Capitan or higher</li>
 	<li>An Intel Dual Core i3 processor</li>
 	<li>4GB or more RAM</li>
 	<li>Xcode 7 or higher</li>
</ul>
</li>
 	<li>However, the recommended specifications are:
<ul>
 	<li>macOS</li>
 	<li>An Intel Quad Core i5 processor</li>
 	<li>8GB RAM</li>
 	<li>SSD Hard Disk</li>
</ul>
</li>
</ul>
You can either download GameMaker from YoYo Games’s website, or you can install it through Steam. Is there an advantage to getting it through Steam? It depends—the installation process can be easier because it makes sure that you have all the additional DirectX components that you might need installed before getting GMS. Steam also auto-updates the program and simplifies the installation process.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/021.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/021-1024x547.png" alt="Buying GameMaker Studio on Steam" width="727" height="389" class="aligncenter  wp-image-725" /></a>
If you decide to download it through YoYoGames.com, click on “GAMEMAKER” at the top in the main menu.
<h2>Trial</h2>
You’ll be presented the option to “Try for free today,” which takes you to <a href="http://yoyogames.com/get">yoyogames.com/get</a>. The Trial includes everything you need to make and test a game. If you want to release &amp; distribute games via Windows and other platforms such as iOS, mobile devices, or consoles, you must purchase an additional license for GMS. You can have infinite sprites, backgrounds, and levels in the free version.

GMS has a few more drawbacks to it than a drag-and-drop engine like <a href="https://www.youtube.com/watch?v=5xVFoCslZHs">Construct2</a> does. For one thing, it uses its own programming language (GML). For another, you can only export executable files, meaning your players have to download and run .exe files. Thirdly, there is currently no support for Linux in the free version. Even if you do buy a license, you have to pay upwards of a hundred dollars to export to a variety of formats. At the time of this writing, GameMaker Studio can still be used for free, indefinitely. <a href="https://www.facebook.com/yoyogames/?rc=p">YoYo Games Ltd.</a> says, <em>“The Trial is free to use for as long as you want, but does have some limitations.”</em>

From <a href="http://yoyogames.com/get">yoyogames.com/get</a>, click on the green button that says “DOWNLOAD.”

<a href="http://yoyogames.com/get"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/04-1024x745.png" alt="http://yoyogames.com/get" width="1024" height="745" class="aligncenter size-large wp-image-736" /></a>

The “DOWNLOAD” button takes you to your YoYo Account Management login page. the first time you use GameMaker Studio 2,<strong> you must have an internet connection</strong>. After the initial login, you should be able to use the product offline.

Assuming you’ve never had GMS before, you’ll want to create an account. A free GMS license is included in creating an account, so enter your email address in the text fields, check all the boxes, and click Register.

After your account has been created, check your email for an activation link. Click on the link received by email to activate your account, then log in. It’ll ask you to create and confirm a new password. Type in a password you can remember or keep safe.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/05.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/05-1024x791.png" alt="" width="1024" height="791" class="aligncenter size-large wp-image-737" /></a>

You may or may not see a page that lists GM’s Terms and Services. If so, read them, scroll to the bottom, and click “I accept these terms.”
After you successfully log in, look for the green button that either says “Download GameMaker: Studio 1.4” or “Download GameMaker Studio 2.”

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/08.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/08.png" alt="Installer options" width="356" height="145" class="aligncenter size-full wp-image-756" /></a>

Notice a nice new feature of GameMaker Studio 2: <strong>You can download a Mac installer!</strong> That’s right, for all you users who develop on laptops (MacBooks included!) YoYo officially launched GameMaker Studio 2 on macOS for the first time in September 2017! However, for the purposes of this tutorial, I will be showing screenshots of downloading the Windows installer.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/09.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/09.png" alt="" width="935" height="132" class="aligncenter size-full wp-image-766" /></a>

Clicking “Download Windows installer” will download a “GameMakerStudio-Installer” (with a current version number) .exe executable file to your computer’s Downloads folder. This should only take a minute or two on a good internet connection.

A standard Installer Wizard should pop up and ask for a License Agreement while explaining the legal terms and conditions that apply when you use the YoYoGames Platforms. I highly recommend leaving the “File associations” box checked, since it only applies to specific YoYo Project Files (.yyp) and Compressed Project Files (.yyz).

The boxes that are required are: GameMaker Studio 2, DotNet Install (Microsoft .NET 3.5sp1 and 4.5 Frameworks), Visual C++ Redistributable (Microsoft Visual Studio 2012 and 2015 C++ x64 runtimes), and Optimize Executable (to optimize the executable and add the Global Assembly Cache). Click “Next.”

The setup wizard will install GameMaker Studio 2 in the folder of your choosing. The space required for this IDE is approximately 353.2 MB. On my machine, this finished installing in under a minute.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/15-16-17.gif"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/15-16-17.gif" alt="" width="397" height="309" class="aligncenter  wp-image-815" /></a>

Congratulations! GameMaker Studio 2 has been installed on your computer! Click Finish to close the wizard. The GameMaker program is living on your computer and it's ready to go!
<h2>Login</h2>
You will be presented with a brand new, black-and-green-themed Login screen. When you first open GameMaker Studio 2, you will be asked to log in to your YoYo Account (or register for one if you haven't already). Your license is tied to a YoYo Account, and you are required to have made one to be able to use GameMaker Studio 2. This account holds all your license details for the YoYo Games products that you own, and is also used for the YoYo Games Marketplace. Enter in the same email address and password you used to create your account to login and install your profile to your new IDE.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/182.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/182.png" alt="Login" width="460" height="287" class="aligncenter  wp-image-827" /></a>
<h2><em>Make Games, Not Excuses!</em></h2>
<strong><em>It’s important not to stop here, even though it feels like you’ve already accomplished a lot. You <u>must</u> click on “Tutorials” or “New Project” so that you don’t just stop here.</em></strong>

Oftentimes, when you get to this stage, you’ve downloaded the program, it’s on your computer, and you own it… but you've never really opened up a new project. You just sort of get overwhelmed by all the buttons and dials and gizmos and doodads.

Keep reading to learn about movement controls, sprites, objects, rooms, and more.
<h2>Tutorials</h2>
Once registered and logged in, the main IDE will open on the Start Page:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/201.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/201-1024x436.png" alt="Start Page" width="1024" height="436" class="aligncenter size-large wp-image-845" /></a>

When you click on the <strong>Tutorials</strong> or <strong>Demos</strong> buttons, you will be shown the tutorials/demos that you own (none yet), and the official tutorials/demos that are available for downloading. To download, simply click on the icon, and it will be added to your Owned section at the top (you may be required to login to the Marketplace before this can be done). Once the tutorial or demo is in the “Owned” section, you can mouse over it and either install it, or view the information on it from the Marketplace.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/221.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/221-1024x868.png" alt="Tutorials" width="1024" height="868" class="aligncenter size-large wp-image-856" /></a>

For those that are new to programming, or who have never used any game creation tool before, GMS offers an easy-to-use <strong>Drag and Drop (DnD)</strong> interface of icons that allow you to start creating your own games using visual scripting. Starting up the official tutorial for “My First Game - DnD” will get one of these started for you. (That’s Drag ‘n’ Drop, not Dungeons and Dragons. 😉) This creates a top-down arena shooter game.

If you are a more experienced programmer, then you can use the propriety scripting language <strong>GML</strong> to create your games, or you can even combine both and call GML functions with (and from) Drag and Drop actions, giving you a great deal of flexibility when it comes to how you write things. Starting up the official tutorial for “My First Game - Code” will start one of these project for you.

Once a tutorial or demo has been installed, click on it to open it. You will be prompted to provide a location to save the tutorial project to before the IDE opens for you to begin. GameMaker Studio provided a default location in my Documents folder.

GMS comes with a complete <strong>Image Editor</strong> for creating your own sprites and tile-sets that will also import images that you have made in any external editor. Once you have your images, it’s simply a question of assigning them to objects in the <strong>Object Editor</strong>, adding some code or DnD actions, and then placing instances of these objects into a game room in the <strong>Room Editor</strong>. There are also additional tools for creating <strong>Paths</strong>, <strong>Timelines</strong>, <strong>Shaders,</strong> and more.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/231.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/231-1024x551.png" alt="My First Game Tutorial" width="1024" height="551" class="aligncenter size-large wp-image-865" /></a>

The tutorial “<a href="https://youtu.be/IWXJbUHLYXA?list=PLhIbBGhnxj5IF9saL3KNqeJqHKGHHeLFh">My First Game - DnD</a>” will take you through the process of creating a small top-down shooter game. The tutorial itself is extensive and covers the user interface, game graphics, animation, player interaction within a game, and more. For reference, it is split into the following chapters:
<ul>
 	<li>Chapter 1 - Movement</li>
 	<li>Chapter 2 - Shooting</li>
 	<li>Chapter 3 - Enemies</li>
 	<li>Chapter 4 - Tiles and Views</li>
 	<li>Chapter 5 - Scoring</li>
 	<li>Chapter 6 - Sounds</li>
 	<li>Chapter 7 - Title Screen</li>
 	<li>Chapter 8 - Spawners</li>
</ul>
Each chapter is also accompanied by a short video that takes you through each of the steps. You can close GMS at any time in the progress of the tutorial, and when you next load the project, you will be taken to the place where you left off.
<h2>Create a New Project</h2>
On the Start Page, the Projects section is where you can create, open, or import projects. You can click <strong>New</strong> to create a new project, <strong>Open</strong> to open an existing project, or <strong>Import</strong> to open a <a href="https://www.yoyogames.com/studio">GameMaker: Studio 1.4</a> GMX project file, or to open a compressed YYZ GameMaker Studio 2 project file. Both Open and Import will open the file explorer for you to browse to the project file you require.

GameMaker is ‘code-optional,’ which means you can start with drag-and-drop (absolutely no code), then move on coding simple movement, then to coding everything in your game. When you create a new project, GMS asks you to choose between “Drop and Drop” and “GameMaker Language.”

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/214.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/214-300x136.png" alt="Drag and Drop or GameMaker Language" width="300" height="136" class="aligncenter wp-image-855 size-medium" /></a>

The available options are:
<ul>
 	<li><strong>New Drag and Drop Project</strong>: This will create a new project in which the Object Editor (and any other editors that permit code) will be set up to use the GameMaker Studio 2 <strong>Drag and Drop (DnD) </strong>interface. Note that this is not an exclusive DnD interface, and you can switch between DnD and GML code by right-clicking your mouse.</li>
 	<li><strong>New GameMaker Language Project</strong>: This will create a project where the default programming is done using the <strong>GameMaker Language</strong> (GML). This is also not an exclusive GML interface, and you can switch between GML code and DnD by right-clicking your mouse.</li>
</ul>
No matter what you select, you will then be prompted to choose a save location for the project, and then it will be opened in GameMaker Studio 2.

After logging in and starting a new project, GMS will take you to the initial IDE with some basic windows docked to the sides. This is simply an area where you can organize the different resources of your game while you are working:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/241.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/241-1024x478.png" alt="Workspace" width="1024" height="478" class="aligncenter size-large wp-image-875" /></a>

The <strong>workspace</strong> is the name of the main area in the middle of the window where you will be doing the bulk of your work. On the right of the workspace, we have the <strong>Resource Tree</strong>, which lists all the different elements your project can use, like sprites, objects, or rooms.
<h2>Sprites</h2>
A great way to start learning how to use tools is to pick a classic game to reproduce, like <em>Space Invaders</em>,  <em>Pong</em>,  <em>Pac Man</em>, or  <em>Asteroids</em>. In this quick example, let’s make our own copy of <em>Space Invaders</em>.

<strong>Sprites</strong> are the first things you’ll need when making any project in GMS. A sprite is an image that represents a game object and can be animated—although it doesn’t have to be—and then drawn to the screen. A sprite will usually be associated with an object, but you can draw sprites on their own. When you create a new project from the Start Page, your resource tree will only contain empty folders.

<strong><em>Right-click</em> on the Sprites Resource Folder, and then select the option <em>Create Sprite</em>.</strong> This will create a new sprite and open the sprite editor for you. (If the sprite editor does not open, simply double-click on the new resource.)

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/251.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/251.png" alt="Create Sprite" width="640" height="442" class="aligncenter wp-image-885 " /></a>

All resources must be given a name, so that GMS can identify them easily. This is just a variable that holds an ID value that “points” to the resource (in this case a sprite). Give a descriptive name so that you can tell at a glance whether a resource is a sprite or an object or something else. (Many people do this by prefixing or suffixing the resource with the letters “<em>spr</em>”—for example, “spr_Player.”) Resource names can only use letters, digits, and the underscore symbol, no spaces. All resources must start with a letter, not a number.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/261.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/261-1024x597.png" alt="Editing a sprite" width="1024" height="597" class="aligncenter wp-image-886 size-large" /></a>

It’s a good idea to start with the protagonist, i.e. the player-controlled object. Once you’ve named it, click <em>Edit Image.</em> 32x32 pixels is a good standard size; in the “Room” interface, the grid in each room also happens to snap to 32x32 pixels, so this makes it easy to snap sprites into a room.

Double-click on the resource you just created to open it. An image editor pops up that you can use to zoom in, color, draw, color-fill, et cetera. Notice a property called “Opacity.” <em>Note: This can sometimes get set to “0” <u>randomly</u>, for no reason</em>. Several people have had this randomly set itself to 0 upon opening. If it’s set to 0, you don’t draw. Nothing comes out of your pen. So your pen “isn’t working,” your mouse is “broken,” and you don’t know why. The trick to fix this little quirk is to set the Opacity back to 255.

When prototyping a new game project quickly, you can just fill in the 32x32 box with a solid color to use as placeholder art. You can always go back and edit this, and GMS will automatically change it throughout your game. So, as you edit your first sprite, spend as much or as little time as you want on the artistic value. The sprite-editor interface is similar to MS Paint, and uses keyboard shortcuts such as Ctrl+Z to Undo.

For some free open source 2D assets, check out <a href="http://opengameart.org/">OpenGameArt</a> and <a href="http://freegamearts.tuxfamily.org/">FreeGameArts</a>. Also try <a href="http://www.lostgarden.com/search/label/free%20game%20graphics">LostGarden</a>, <a href="http://open.commonly.cc/">open.commonly.cc</a>, and <a href="http://forums.tigsource.com/index.php?topic=8970.0">tigsource</a>. These links are all gathered in one convenient spot at <a href="http://www.pixelprospector.com/royalty-free-graphics">pixelprospector.com/royalty-free-graphics</a>.

I found some free “Bug Blaster” sprites from <a href="https://opengameart.org/content/old-bugs">OpenGameArt.org</a>, thanks to original author <a href="http://m484games.ucoz.com/">Master484</a>, but you can draw your own space invaders if you want.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/BugBlaster.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/BugBlaster-300x201.png" alt="" width="300" height="201" class="aligncenter wp-image-1056 size-medium" /></a>

&nbsp;

To import a pre-built sprite sheet, you need to click on the Image &gt; Import Image(s) button to open the file explorer where you can browse for an appropriate image, which must be either PNG, GIF, or JPG format.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/281.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/281.png" alt="" width="1007" height="700" class="aligncenter wp-image-906 size-full" /></a>

You’ll get a warning about replacing the existing sprite frames, which is fine, since this is a new sprite and we aren’t going to over-write anything. Click “Yes” to continue. The Sprite Editor will now look like this:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/291.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/291-1024x553.png" alt="" width="1024" height="553" class="aligncenter size-large wp-image-915" /></a>

If you import a sprite animation, the top part will show each individual frame and clicking on them would show that frame in the preview window below. Uploading only one image in the sprite would only show that image.

Now that we've added an image, we need to set its <strong>origin</strong>. The origin is simply a point on the sprite that will be used to position it within our game room, and you can set it by either clicking anywhere on the preview image to set the origin to the mouse position, or using the drop down menu to set a fixed position for it.

After you’re done drawing your protagonist, close the image editor and save the changes you made.

There is also a separate “Save” floppy-disk icon that saves your image externally as a PNG. So if you want to use a different art program, such as Photoshop, and GMS’s sprite-editor isn’t cutting it for you, you can save as a .PNG, open it with Photoshop, then re-import it later and use it exactly the way as something you’d make in the Image Editor.

The “Show Preview” button gives you the option to view a sprite’s animation.
<h2>Animation</h2>
The easiest way to animate a sprite is to duplicate your initial image by clicking “Copy” up at the top, paste it, then double-click on the second image to open it, then use the editor to make a second “frame” in an animation sequence slightly different from the first. Close again when you’re done.

&nbsp;

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/30.gif"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/30.gif" alt="" width="800" height="558" class="aligncenter size-full wp-image-925" /></a>

The preview window will show you the animation of your sprite. The changes are shown at a rate of either 15 or 30 frames per second. <em>Changing the rate of frames per second in the editor ONLY changes your view in the preview window. The game itself still runs at 30fps all the time. You must change the speed rate in the ROOM if you actually want it to run differently. </em>The editor does NOT display the speed used in the game, therefore, use it only in the preview window.

You <em>could</em> change the speed of the game in the editor, but that can mess with your gravity and movement speed. Your movement speed is based on a consistent number of pixels “per step,”—so if it’s 5 pixels per step, at 30 frames per second, your character moves 5 pixels every 1/30<sup>th</sup> of a second. If you change that to 15, it moves 5 pixels every 1/15<sup>th</sup> of a second, so your entire game moves more slowly. You can’t just change something for one sprite; changes affect the entire game universe.

The best way to create a “slower” animation for one sprite would be to select that first image again, then copy &amp; paste it a few times so that for 2 frames it shows the first image, and then for the subsequent frames, it shows your second image “frame.”

“Image1” and “Image0” would be the same, and “Image2” would the different one you edited. Copying and pasting images places duplicates next to the originals, which can reorder your images. Keep copying and pasting images to act as frames until you are satisfied with the speed of your sprite’s animation. Close to save.

Switching between animation cycles is how you change your sprite from idle to walking, or walking to attacking, and then back to idle based on key presses.

This example animation script needs to run every frame, so is called a Step event.
<pre><em>//Walking animation </em>
if (speed &gt; 0)
{sprite_index = spr_player_walking;
image_speed = 0.5;}
else
{sprite_index = spr_player;}

<em>//Shooting animation</em>
sprite_index = spr_player_shooting;</pre>
<h2>Objects</h2>
Moving forward, you could choose to make all of your game’s sprites first, or you could make one sprite at a time, turn it into an Object, put it in the Room, then go back and do the same process again for each. A game like <em>Space Invaders</em> has a protagonist sprite, an enemy sprite, a wall sprite, and a projectile.

<em>Note: Sprites are merely pictures. They have no code or underlying body to give them physical presence. You can’t just put a sprite into a Room. First you have to initialize a sprite as an Object to put it into a Room.</em>

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/311.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/311.png" alt="Create Object" width="393" height="260" class="aligncenter  wp-image-935" /></a>

Right-click on “Objects,” and select Create. GameMaker doesn’t let you name things the same name, even if they’re different types, so a sprite and an object cannot share the same name. Another work-around for this issue is naming your sprite’s object as “obj_Player” which references the protagonist object instead of the protagonist sprite. What matters most is the sprite you connect it to. Select it from the list of available sprites by clicking the button labelled “<em>No sprite</em>” and select the sprite "spr_Player" from the list of available resources. Now your sprite will have an Object form.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/321.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/321-1024x776.png" alt="" width="1024" height="776" class="aligncenter size-large wp-image-936" /></a>

There is a small list of check-boxes next to properties to examine.
“<strong>Collision Mask</strong>” you don’t need to change for simple games.
“<strong>Visible</strong>” is pretty self-explanatory. “Invisible” objects are very useful for adding an invisible object on either side of the screen for an enemy patrol unit to bounce between. (Invisible objects <em>do</em> show up in the game editor, so when you’re looking at your Room, you’ll be able to see them. But when you press “Play,” they won’t show up.)
“<strong>Solid</strong>” means that other solid things can’t pass through it.
“<strong>Persistent</strong>” means that it will last, regardless of the level, and it will stay in the same location. (Things like health bars, life counts, and high scores numbers are good things to persist.)
“<strong>Uses Physics</strong>” is something beginners shouldn’t need to worry about. GMS has built-in physics, but they are hyper-realistic. This can look very strange in a sprite-based game like <em>Super Mario</em>, where Mario jumps 3x his height.
“<strong>Parent</strong>” is useful if you want a set of objects to have the same functionality. For example, there could be a Room in your game where you have to collect a bunch of pieces, and each piece has different attributes that you have to code differently. So you can make 1 piece the parent, and code to check if there are any of these objects left, and if they’re all gone, the room is complete. “Children” belong to the “Parent.”
Close this when you’re done.

If you haven’t drawn the sprite you want to turn into an object yet, you can click on the New Sprite button to create a new sprite resource and edit it as you wish. Now it will automatically be assigned to the object that you had open when you started to create it. Once you select a resource, you can also click on the “Edit Sprite” or “Edit Image” buttons to edit either the image itself or the sprite resource.

The object editor opens within the same workspace as the sprite editor, and it may push the sprite editor out of the visible space. You can hold down your middle mouse button and move the mouse to pan around the workspace, or you can use Ctrl + Tab to open the workspace switcher and select the editor that you want to see directly.
<h2>Events and Code</h2>
Re-open our Object by double-clicking on it. Now we get down to the functionality of GameMaker! “Events” are moments in the game loop where things are made to happen based on what you have programmed for them. GMS splits game time into “steps,” with the game speed defining how many of these steps there are per second. A “step” is the loop that runs constantly with all the events being checked and triggered while the game runs. GMS works with cycles of events. From the moment a room is started to the moment it is finished, there is a game loop running. A series of events are run every step, and you can choose to place code or drag-and-drop actions in your instances that respond to these events.

In the <strong>Event Editor</strong> window chained to our Player object window, click “Add Event” to bring up a whole menu that has a lot of options. It can be kind of overwhelming!

<em>A game in GameMaker Studio 2 is simply a selection of code within events that are performed a number of times every second. This is called the “game loop” and a single game loop is called a <strong>game frame</strong>. The number of game frames in a second is what gives us our <strong>Frames per Second</strong> (FPS) value.</em>

You can see all the event categories by clicking on the <em>Add Event</em> button:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/331.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/331.png" alt="" width="430" height="515" class="aligncenter size-full wp-image-946" /></a>

In the image above, you will see that we have highlighted the “Step” category.

“Collision Event” is an event that you place in an object and then specify against which other object you should be checking for collisions.

“Create Event” happens when an instance of the object is first created, and is the very first thing that happens when a room is entered. This event is the ideal place to initialize variables, start Timelines, set paths, and do anything else that generally only needs to be done once or only when an instance first appears in the room.

“Destroy Event” is the very last event to be executed when an instance is destroyed. It can be very useful for creating explosions when an enemy is killed, for re-spawning a new instance of the object in another part of the room, or for adding points onto a score.

<strong>“Step Event” is an event that is checked every single step of the game while the instance exists. In general, you will use the main Step Event most.</strong>

Since we’re making a <em>Space Invaders</em> game, we’ll want to move our protagonist left and right, so we’ll want to use the keyboard’s arrow keys inside of a Step Event.

If you select it, you'll see the event added into the Event Editor window and a new window chained to it:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/341.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/341-1024x434.png" alt="" width="1024" height="434" class="aligncenter size-large wp-image-955" /></a>

The new window is the <strong>Drag and Drop Editor</strong>, split into three parts:
<ol>
 	<li>Left: the <strong>action list</strong> - this gives a list overview of all the actions in the event</li>
 	<li>Middle: the <strong>action workspace</strong> - this is where you drop the actions that you want to perform and edit them</li>
 	<li>Right: the <strong>action toolbox</strong> - Here you can find all the Drag and Drop™ action blocks that you can use to create your games.</li>
</ol>
You select an action from the <strong>action toolbox</strong> and drag-and-drop it onto the <strong>action workspace</strong>. Once in the workspace, you edit the parameters that it requires, then continue to drag and drop further actions to “chain” them to the previous one. Actions are added in a linear fashion, so each subsequent action that you add will be added <em>after</em> the previous one. Let’s see how that works in practice by adding an action.

As mentioned above, the Step Event is run each and every game loop, so anything we put in here will happen once per game frame (30 times in a second for a 30 FPS game). In this case, we are going to add an action to the event to make the player instance move right across the screen. We are going to set the built-in variable "x" to move and use the action “<strong>Assign Variable</strong>”.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/351.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/351.png" alt="" width="727" height="521" class="aligncenter size-full wp-image-965" /></a>

We want to set the value of “x” to 4 <em>relative</em> to its previous value, so we set the action to look like this:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/36.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/36.png" alt="" width="274" height="136" class="aligncenter size-full wp-image-966" /></a>

Note that now in the list view on the left of the editor, we have the action written as plain text:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/37.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/37.png" alt="" width="519" height="252" class="aligncenter size-full wp-image-975" /></a>

What does this do? All instances have some <em>built-in variables</em>, of which “x” and “y” are perhaps the most important, as they set the position of the instance in the game room. In this case we are telling GMS to take the x position value and then add 4 to it. In GMS, the (0, 0) position is considered as the top left hand corner of your room. Horizontal axis is “x” and vertical axis is “y”:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/38.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/38.png" alt="" width="354" height="302" class="aligncenter size-full wp-image-976" /></a>

If we hadn’t flagged the “relative” check-box, then we would be <em>setting</em> x to 4 rather than adding to it, and if we’d used -4 instead of 4, then we would have been <em>subtracting</em> 4 from x.

(If you now run the game again, you'll see the player instance move off to the right!)

Left is negative movement on the X axis. (It’s important to check the “Relative” checkbox.) Negative -5 is a pretty standard rate of movement. The higher you make the number, the faster your sprite will appear to move. The lower you make this number, the slower you will move. The “Relative” checkbox means that the movement of your coordinates is relative to your current location, not to the grid of the whole room.

We want to now make the player instance move when the user presses the <strong>Arrow Keys</strong> on the keyboard. Currently we are adding 4 to the "x" value every game frame, so what we want to do is only add 4 if the keyboard right arrow is being pressed. For that we use the “<strong>if key down”</strong> action, which will evaluate to either true or false if the given key is being held down. If it evaluates to true, then we will move the instance by 4. The action can be found in the “<strong>Mouse and Keyboard”</strong> section of the action toolbox and you should drag it into the action workspace <em>above</em> the Assign Variable action:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/39.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/39.png" alt="" width="794" height="521" class="aligncenter size-full wp-image-986" /></a>

If you drag it near an existing action, an area will be highlighted, indicating that it can be placed either above or below the action in the chain (in the image above we place it above), and once you drop it you will see that it is connected to the Assign Variable action like this:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/40.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/40.png" alt="" width="295" height="253" class="aligncenter size-full wp-image-995" /></a>

That square chain on the left means that the "if" action will be called and <em>then</em> the Assign Variable action, but that they are independent of each other. We want to change this so that the Assign Variable action will only be called if a key is pressed, so now we need to drag it onto the right-hand side of the “<strong>if keyboard down”</strong> action, like the screenshot below. Now what we have is the “if” checking for a key, and only if it returns true (the key is being held down) will it run the assign variable action. We only need to set the key that is being checked now, so change the "vk_space" value for "vk_right." (The "vk_" variables are special built-in <strong>constants</strong> that are used to signify different keyboard keys) It should all now look like this:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/42.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/42.png" alt="" width="765" height="430" class="aligncenter size-full wp-image-1007" /></a>

The conditional we are checking is the value returned by the function "keyboard_check" which returns true if the key (in this case the right arrow) is being held down, and false otherwise. Note that the assign variable action is placed to the right to indicate that it is only being run if the conditional check is true, and that this is also reflected in the action list on the left, where the assign variable entry has been tabbed too.

Run your game again (press the Play arrow button) and this time the player instance should do nothing unless you press the right arrow key.

We can expand the current action list now to cover the remaining three directions: up, left and down. You could repeat the whole process and add each action, or you could do what we’ll do now, which is to copy and paste the actions we have and then edit them. To copy multiple actions, first select them by holding down the Ctrl key and then left clicking on each of the actions we want to copy. Now hold down Ctrl again + <strong>C</strong> to copy them and then Ctrl + <strong>V</strong> to paste them. They will automatically be pasted after the previous actions, so you can go ahead and do this three times so that we have a total of four “if” checks:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/43.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/43.png" alt="" width="765" height="753" class="aligncenter size-full wp-image-1015" /></a>

You can now edit the actions so that you have:
<ul>
 	<li><strong>if right arrow key down (vk_right): x + 4</strong></li>
 	<li><strong>if left arrow key down (vk_left): x - 4</strong></li>
 	<li><strong>if up arrow key down (vk_up): y - 4</strong></li>
 	<li><strong>if down arrow key down (vk_down): y + 4</strong></li>
</ul>
<a href="https://msdnshared.blob.core.windows.net/media/2017/10/44.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/44.png" alt="" width="548" height="861" class="aligncenter size-full wp-image-1025" /></a>

As you can see, we <em>subtract</em> from x to go left this time, and we have also changed the last two conditionals to change the “y” position instead of the x position, where subtracting from “y” moves up, and adding to “y” moves down. Again, the (0, 0) position is considered as the top left-hand corner of your room and the horizontal axis is the x axis and vertical axis is the y axis:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/38.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/38.png" alt="" width="262" height="224" class="aligncenter  wp-image-976" /></a>

Run the game now and move the instance with the arrow keys.

Now your character moves left and right! The next step is to put it in a Room.
<h2>Rooms</h2>
Right-click on the Rooms Resource Folder, and choose <em>Create Room</em>. All games that you make in GMS need at least one room to run.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/45.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/45.png" alt="" width="387" height="273" class="aligncenter  wp-image-1026" /></a>

A room is just a space where you place instances of the objects that make up your game, as well as tiles and any other graphical resources. When you first create a room in your resource tree, you will be presented with a new window with which to edit its properties. This is a grid comprised of 32x32 pixel units, which is the size of your object and sprite.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/46.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/46-1024x551.png" alt="" width="1024" height="551" class="aligncenter size-large wp-image-1035" /></a>

By default, the room tools will be placed on the left, with three main sections:
<ul>
 	<li><strong>Layer Editor</strong>: Everything in a room is placed on <em>layers</em>. Layers are ordered by depth and this depth is what defines the order in which the layer contents will be rendered to the screen when the game runs. “<strong>Depth</strong>” is on somewhat of a Z-axis that can go up to 1000 and down to -1000. Projectiles should be underneath your protagonist layer, because you’re firing from the origin of your protagonist. You can always come back and edit the depth if you’re playing your game and something seems layered incorrectly.</li>
 	<li><strong>Layer Properties</strong>: Each layer that you add to the room will have its own properties, and those properties will change depending on the layer type.</li>
 	<li><strong>Room Properties</strong>: Rooms have a number of properties too, and these can be set here. Things like the room size and the camera view ports that are active can be set here.</li>
</ul>
We've mentioned that there are different layer types, so let's just go over what they are and how they can be used when building your games:
<ul>
 	<li>Background Layer
<ul>
 	<li>The background layer can be filled with a single color or a single image. It can be moved and positioned within the room, and you can have multiple background layers.</li>
</ul>
</li>
 	<li>Instance Layer
<ul>
 	<li>The instance layer is where you place all the instances of the objects that you require for the game.</li>
</ul>
</li>
 	<li>Tilemap Layer
<ul>
 	<li>Add tiles from any of the tile set resources you’ve created. This will be set up automatically to use a grid the size of the tile set cells. You can only add a single tile to each grid cell, so if you require multiple tiles to occupy the same space, then you should be using multiple tilemap layers.</li>
</ul>
</li>
 	<li>Path Layer
<ul>
 	<li>The path layer is the only one that does not actually get rendered when you run your game. This is more of a “convenience” layer for helping you to create or edit Path resources, since it permits you to add or edit paths within the actual room space.</li>
</ul>
</li>
 	<li>Asset Layer
<ul>
 	<li>The asset layer simply takes a sprite resource and draws it using the parameters that you set when you add it into the room. Sprites can be added to this layer by clicking on the sprite in the resource tree and then dragging it into the room editor workspace.</li>
</ul>
</li>
</ul>
If you have your protagonist selected under the Objects tab when you go into your first Room, GMS will interpret that as, “wherever you click, that’s where you want your protagonist to be.” (You can click multiple times around the room to create multiple objects, as well as clicking multiple times in one spot to create a “stack” of objects layered on top of one another.) Right-click to delete if you made a mistake.

<strong><em>You can drag an instance of the object "obj_player" into the room by clicking on the object in the resource tree and dragging it into the room where you want it to appear.</em></strong>

Once they’re in there, you can move them around by clicking and holding, which is nice if you put something in the wrong spot. One thing you should avoid doing is scaling within the room, because it messes with the boundaries of the objects. GMS lets you stretch things from the corners, but that messes with the boundaries and it doesn’t interact with the room the same way as it would if it were actually sized correctly. Go back into your sprite-editor and make your sprite the size you want. Once your protagonist object is in your room, click OK.

You can delete “room0” as long as you have another room to replace it. If you want to add more sprites to your game, remember to right-click the Sprites folder to create new ones, name it using the convention “spr_block,” then right-click the Objects folder to associate your sprites with new tangible objects, using the “obj_block” naming convention as well, then drag and drop those objects into your game’s room. Click Play to run your game and see your progress so far!

Tile Sets

<strong>Tile Sets</strong> are optional features created from sprites, but are classified as separate resources, since the way that GMS handles them is a bit different from both sprites and objects. A <em>tile</em> is simply a graphical resource that gets drawn to the screen with very little CPU/GPU overhead, making them ideal for designing any static items in levels. A <em>tile set</em> is a collection of tiles created together in one sprite. Tiles can <strong>only be rectangular</strong> or <strong>square</strong>.

<em>To start making a tile set for walls or floors in a top-down game, we would need to have a tile set image made in the sprite editor. </em>The very first tile is blank in that image. The way that the tilemap for the room is stored in GMS means that tile (0) will always need to be blank, as it’s essentially the “delete” tile or the “empty space” tile. So, when creating your maps, the top left corner tile will always need to be empty in this way.

With a sprite created, you can define the tile set by first creating a new tile set resource. To do this, right-click the Tile Sets resource folder and select <em>Create Tile Set</em>. This opens the <strong>Tile Set Editor,</strong> where you can add the sprite and set its properties. Set the tile set size to 32px, and leave the rest of the values at their default. You can now close the tile set editor, as you can use the tile set “as is” to create tilemap layers in the room editor.
<h2>Creating Sounds</h2>
Adding sound effects and background music can be done through the <strong>Sound Editor</strong>, which is opened whenever you create a new Sound Resource.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/47.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/47.png" alt="" width="434" height="506" class="aligncenter size-full wp-image-1036" /></a>

Sounds can be compressed or uncompressed. You’ll usually want small sound effects to be WAV, and larger effects or music to be MP3 or OGG. (Again, it is recommended that you name your sounds using an appropriate prefix like “snd_” so you can easily identify it later.)

Adding a sound is as simple as clicking the add sound ellipsis button (…) and then browsing in the file explorer that opens to the file you want to use. Once you have selected one and loaded it in, you can then preview it using the playback controls, as well as change certain attributes for how the file should be exported. Sounds take up a lot of space on disk, so you should be careful when creating them for your game projects.

For some open source sounds, check <a href="http://www.freesound.org/">FreeSound</a>, <a href="http://www.pdsounds.org/">pdsounds</a>, <a href="http://www.flashkit.com/soundfx/">and Flashkit</a>. For a web-based soundboard that will let you export stuff to WAV files, go to <a href="http://www.bfxr.net/">bfxr.net.</a>

For open source music, check <a href="http://freemusicarchive.org/">Free Music Archive</a>, <a href="http://www.openmusicarchive.org/">Open Music Archive</a>, <a href="http://incompetech.com/music/royalty-free/">and Incompetech</a>. For chiptune music, check out the archive of 8-Bit Collective <a href="https://archive.org/details/Best_of_8_Bit_Collective-2006-2011">here</a>.

One of the best tools for editing any kind of audio is <a href="http://audacity.sourceforge.net/">Audacity</a>. If you need some tutorials for using it, check <a href="http://audacity.sourceforge.net/manual-1.2/tutorials.html">here</a>. Additionally, <a href="http://www.fmod.org/download/">Fmod</a> is a piece of software specifically geared to creating audio for games, even integrating with some game creation engines like Unity. Check out some tutorials <a href="https://www.youtube.com/user/FMODTV">here</a>.

You can close the sound editor once you’re done.
<h2>Compiling</h2>
If you would like to test out your controls at this point, you may click the Arrow “Play” button.

This will compile your project, and will also be where any errors pop up. Compiling your game can mean one of two things: compiling it for testing, or compiling it to create an <em>asset package</em> for a specific target platform.

Testing your game can be done by simply pressing the Play button at the top of the IDE, which will launch the game for testing using the specified target. You can also run the game in <strong>Debug Mode</strong> by testing using the Debug button. By default, GMS will run and debug using the built in virtual machine, which is basically the same as running on the desktop OS being used.

At this point, the left and right arrow keys keys should move your character left and right in your room. …You might notice you can run off your screen for forever, and there is nothing to stop you! When programming a game, it can be very easy to make mistakes. These mistakes are not always detected by the syntax checker, which means that these mistakes will only become apparent when you actually run or compile your game.

Let’s add some game room boundaries.

To add some boundaries to stop your protagonist from running off the screen, right-click on the word Sprite, “Create Sprite,” name it spr_Border or something similar, then choose the size of your outside border by clicking the “Resize Sprite” button. In the case of <em>Space Invaders</em>, we don’t want any of the characters to ever go off the screen to the left, right, or bottom, so these borders should be solid and persistent. A border size of Width: 32, Height: 320 should be OK for the left and right walls, depending on the canvas size of your room, and Width: 320, Height: 32 should work for the top. You could set the Visibility to false to make these borders invisible, too, but for debugging purposes you can leave it visible.

Don’t forget to right-click the Objects folder and create a new object for each sprite you want to put into your game room! Select your obj_Player character and “Add Event” to make player stop when they collide with solid objects—a “Collision” event. The screen should look similar to this:

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/48.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/48-1013x1024.png" alt="" width="1013" height="1024" class="aligncenter size-large wp-image-1045" /></a>

Next, inside the Event Editor, scroll down through the Toolbox on the right to the “Movement” section. Here you will find an action to “Set Friction.” This action is used to set the “friction” for the instance. Friction simply means that a specific amount will be deducted from the speed vector each game frame, where you specify the amount to deduct, with a number between 1 and 0. Usually smaller values work best, like 0.2, but the actual amount will depend on the setup of your project. Setting the friction from 0 to 1, for example, will stop a moving object in its tracks. Leave the Relative box <em>unchecked</em> here. If you set the relative flag, then the amount given will be added to the current friction value, instead of setting it.

<a href="https://msdnshared.blob.core.windows.net/media/2017/10/49.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/10/49-1024x551.png" alt="" width="1024" height="551" class="aligncenter size-large wp-image-1046" /></a>

Now when you run your game, if you have set up solid blocks, walls, and a floor, your player object should not be able to pass through these new elements you have added, but should still be able to maneuver around them. Excellent progress for our <em>Space Invaders</em> game!
<h2>Your First Game</h2>
To dive deeper into learning more about enemy movement, shooting projectiles, spawning, tiles and views, keeping score, sounds, and creating a title screen, please check out the official tutorial for “My First Game - DnD” available inside GameMaker’s start screen, or the YoYo Games YouTube video tutorials found at <a href="https://www.youtube.com/user/yoyogamesltd/videos">youtube.com/user/yoyogamesltd/videos</a>. If the game that you’re thinking of building falls into a similar genre, it’s really nice to not have to start completely from scratch.
<h2>Conclusion</h2>
The goal of this blog post is to pass on technical knowledge and to make games development easier for beginners new to the world of programming. I hope that I’ve done a good job of Demystifying GameMaker Studio!

If you have any requests for other game engines, or wish to share tips and tricks of your own, hit me up on Twitter at <a href="https://www.twitter.com/Saelia">@Saelia</a>. Thanks for reading, and keep on building!!]]></content:encoded>
    </item>
    <item>
      <title>Microsoft Bot Framework Part 4: Natural Language AI, LUIS</title>
      <link>https://docs.microsoft.com/archive/blogs/sarahsays/microsoft-bot-framework-part-4-natural-language-ai-luis</link>
      <pubDate>Thu, 14 Sep 2017 07:28:07 GMT</pubDate>
      <dc:creator><![CDATA[Sarah Jeanne Sexton]]></dc:creator>
      <guid
        isPermaLink="false">https://blogs.msdn.microsoft.com/sarahsays/?p=565</guid>
      <description><![CDATA[Welcome to the fourth post on using Microsoft Bot Framework!

 	Microsoft Bot Framework Part 1:...]]></description>
      <content:encoded><![CDATA[<span style="text-decoration: underline"></span>Welcome to the fourth post on using Microsoft Bot Framework!
<ul>
 	<li><a target="_blank" href="https://blogs.msdn.microsoft.com/sarahsays/2016/06/01/microsoft-bot-framework-part-1/" rel="noopener noreferrer">Microsoft Bot Framework Part 1: Getting Started</a></li>
 	<li><a target="_blank" href="https://blogs.msdn.microsoft.com/sarahsays/2016/06/01/microsoft-bot-framework-part-2/" rel="noopener noreferrer">Microsoft Bot Framework Part 2: Hello World</a></li>
 	<li><a target="_blank" href="https://blogs.msdn.microsoft.com/sarahsays/2016/06/27/microsoft-bot-framework-part-3-conversation/" rel="noopener noreferrer">Microsoft Bot Framework Part 3:  Conversation</a></li>
</ul>
For the final installment of my 4-part blog series, there is a special guest I would like you to meet: <strong>LUIS</strong>! <a target="_blank" href="https://www.luis.ai/home" rel="noopener noreferrer">Language Understanding Intelligent Service</a> (LUIS) is a service in Microsoft’s extensive "Cognitive Services" suite that adds conversational intelligence to your apps. LUIS also allows developers to create their own models, and creates HTTP endpoints that can be pinged to return simple JSON responses.

Smart bots provide an amazing opportunity to generate lively, adaptive interfaces in the channels where your users are talking. This post will show how to kickstart a <a target="_blank" href="https://github.com/SarahSexton/WebChatPush" rel="noopener noreferrer">Node.js bot</a> from Simple to Smart by integrating LUIS and creating meaningful conversations.

In the typical architecture of the inner-workings of a bot, I'd like to highlight the Bot Connector to platform channels. "Bot Connector" allows one bot to connect with many channels and endpoints, as explained in previous posts. Why restrict yourself to one platform when you can hit them all?

<a href="https://msdnshared.blob.core.windows.net/media/2017/09/Typical-Bot-Architecture-Diagram.png"><img width="567" height="319" class="wp-image-635 aligncenter" alt="" src="https://msdnshared.blob.core.windows.net/media/2017/09/Typical-Bot-Architecture-Diagram-1024x576.png" /></a>

There are two ways that bots work under the hood. There are RULE-BASED BOTS, programed with conditions, in an "if this then that" sort of way. My three previous blog posts explained these Simple bots. The other kind are ARTIFICIALLY INTELLIGENT BOTS, that primarily use Natural Language Processing to function.

<a href="https://msdnshared.blob.core.windows.net/media/2017/09/Rules-vs-AI.png"><img width="556" height="313" class="wp-image-626 aligncenter" alt="" src="https://msdnshared.blob.core.windows.net/media/2017/09/Rules-vs-AI-1024x576.png" /></a>

Rule-based bots work by offering you multiple choice options. They do not understand language, and get stuck if you give an answer that is not part of their repository. These bots respond to commands that you are expecting the user to say - but only one explicit string of text. Then the bot goes in and parses the string that the user has given to try and look for the additional information. If the bot doesn't see it, you could program it to start prompting the user, but you have to put considerably more effort into crafting a smooth user experience.

AI-based bots are smarter than rule based bots because they understand the context and intent of user. The artificially intelligent bots in the market today use a subset of AI, called natural language processing (NLP). They get involved in the conversation and pick up keywords and phrases from the user's requirement. An AI-based bot would not get stuck if the user responded with "yeah" instead of "yes," unlike a rule-based bot. LUIS actually intercepts the user's request and converts it to comparable action for the bot.

The 3 most important aspects of the LUIS Framework are:
<ul>
 	<li><span style="color: #993366"><strong>Intents</strong> </span>– <span style="color: #993366"><strong>Verbs</strong></span>: What actions do you want your bot to take?</li>
 	<li><span style="color: #008000"><strong>Entities</strong> </span>– <span style="color: #008000"><strong>Nouns</strong></span>: What things are your bots taking action on?</li>
 	<li><strong>Utterances</strong> – <strong>Example</strong> messages from the user that link intents and entities.</li>
</ul>
You will create a new Language Model and train it with a bunch of example utterances - messages that a real user might actually say - and then you identify the <strong><span style="color: #008000">entities</span></strong> and <strong><span style="color: #993366">intents</span> </strong>of those messages. You can train this through an easy-to-use graphical user interface online at <a target="_blank" href="https://www.luis.ai/home" rel="noopener noreferrer">https://luis.ai</a>.

<a href="https://msdnshared.blob.core.windows.net/media/2017/09/LUIS.gif"><img width="800" height="342" class="size-full wp-image-607 aligncenter" alt="" src="https://msdnshared.blob.core.windows.net/media/2017/09/LUIS.gif" /></a>

For today's example, we will start with the code created in my GitHub repo, <strong><a target="_blank" href="https://github.com/SarahSexton/WebChatPush" rel="noopener noreferrer">WebChatPush</a></strong>. This simple bot creates a loop of numbered messages sent once every second. The user is required to type in the exact word "stop" to exit the loop. <a target="_blank" href="http://cobrabot.azurewebsites.net/" rel="noopener noreferrer">See it in action here</a>.

In this article, we will alter the code to allow the user to say several different synonyms for "stop," or phrases and utterances that convey the same meaning. Most importantly, we will allow the user to type their request using normal language, then detect the <span style="color: #993366"><strong>intent</strong> </span>of the user. We will do this by creating an application using LUIS, then interfacing that application with our existing Node.js bot that is programmed using the SDK of, and deployed in, the Microsoft Bot Framework.
<h2><span style="text-decoration: underline"><strong>Create a LUIS Application</strong></span></h2>
The first step is to go to <a target="_blank" href="https://www.luis.ai/" rel="noopener noreferrer">https://www.luis.ai/</a> and create an account on the home page with your Microsoft Account, and sign in. (The blog post "<a target="_blank" href="https://community.dynamics.com/crm/b/nishantranaweblog/archive/2017/04/18/using-luis-ai-in-microsoft-bot-framework-part-1" rel="noopener noreferrer">Using LUIS AI in Microsoft Bot Framework – Part 1</a>" has more screenshots and up-to-date instructions for further reading.)

After completing the sign up and finishing other details, click on the "My Apps" link and select "New App" to create and register an application.

Give your app a name and set your culture as English (if you want your app to understand and speak English), provide a brief description, then click the "Create" button.

Now that your app is created, you can create your first intent. Head to the Dashboard of the app and select the "Create an intent" button.

Here we will create "Stop" as our first intent. (You can name it "FinishTask," "ExitLoop," and so on.) Next, we define <strong>utterances</strong> that associate with our intent to stop the bot from continuing its loop.

<a href="https://msdnshared.blob.core.windows.net/media/2017/09/Utterances.png"><img width="570" height="597" class=" wp-image-655 aligncenter" alt="" src="https://msdnshared.blob.core.windows.net/media/2017/09/Utterances-978x1024.png" /></a>

Coming up with utterances can be fun! If you love thinking of different ways to say things, or observing how other people chat with your bot, then you can enter in <em>dozens</em> of utterances into your LUIS intent by hand. You can even ask friends, family, coworkers or acquaintances for help by telling them to visit your bot's URL and start talking to it, and seeing what they say.

For example, if we added the following statements to an intent called "Interest," they would <em>all</em> point to the "Interest" intent.
<ul>
 	<li>I am <span style="text-decoration: underline">interested</span> to know about the product.</li>
 	<li>I <span style="text-decoration: underline">want</span> to know about the product</li>
 	<li>I <span style="text-decoration: underline">would like</span> to know about the product.</li>
</ul>
If you already have large databases full of data points that you <em>do not</em> want to enter by hand, or you want to do this part automatically, LUIS can help you skip entering your own utterances manually. There is a way you can choose prefabricated intents that come with their own lists of utterances: just click the "Add prebuilt domain intents" button.

<a href="https://msdnshared.blob.core.windows.net/media/2017/09/prebuilt.png"><img width="538" height="572" class=" wp-image-665 aligncenter" alt="Add prebuilt domain intents screenshot" src="https://msdnshared.blob.core.windows.net/media/2017/09/prebuilt.png" /></a>

<strong>Prebuilt domain intents</strong> come in handy when creating very common intents such as "Greetings" (Hi, Hello, Hey)  and "Farewells" (Bye, Goodbye, See ya) that every user seems to say with a little different flair.

Once we are done specifying our <b>i</b><strong>ntents</strong>, the next important step is to "<strong>Train and Test</strong>" the application.

<a href="https://community.dynamics.com/crm/b/nishantranaweblog/archive/2017/04/18/using-luis-ai-in-microsoft-bot-framework-part-1"><img width="545" height="538" class="aligncenter wp-image-675 size-full" alt="" src="https://msdnshared.blob.core.windows.net/media/2017/09/traintest.png" /></a>

Select Train and Test and click on "<strong>Train Application</strong>" button.

Once the training is completed, we can make use of LUIS's <strong>Interactive Testing interface</strong> to do some quick testing of our utterance and see the "confidence score".

The <strong>score</strong> represents a probability percentage of how "confident" LUIS is in its interpretation. If you type "quit" and see (0.97), that means LUIS is 97% confident that "quit" points to the "Stop" intent. (The numbers don't necessarily have to add up to 100.)
<p style="text-align: center"><a href="https://msdnshared.blob.core.windows.net/media/2017/09/Testing.png"><img width="545" height="237" class="alignnone wp-image-685" alt="Interactive Testing screenshot" src="https://msdnshared.blob.core.windows.net/media/2017/09/Testing.png" /></a></p>
Adding <span style="color: #008000"><strong>entities</strong></span> next is actually optional. These are <strong>values </strong>that your bot can identify and gather, if you want your bot to perform operations based on their value. In our example, we don't need to create entities, because WebChatPush is just a simple Loop. This is atypical. Your bot will likely have more realistic functionality, so you may want to add entities such as "PeriodOfTime" to detect if the user entered a word describing an amount of days, like "week" or "month," but not actual dates, or an entity to detect if the user entered in numeric characters such as '1' or words such as 'one' or 'first'.

Once you are satisfied with testing and retraining your LUIS application, let us <strong>publish it</strong>. Once<strong> published</strong>, it will provide us with an endpoint URL.

<a href="https://msdnshared.blob.core.windows.net/media/2017/09/publish.png"><img width="628" height="518" class="size-full wp-image-695 aligncenter" alt="" src="https://msdnshared.blob.core.windows.net/media/2017/09/publish.png" /></a>

We can append text to the query string "q=" in the endpoint URL to get the JSON result. Once you are done with all your configuration, training, and testing, train and publish the application once more to have all the changes reflected.
<h2><span style="text-decoration: underline">Implementing LUIS in Node.js</span></h2>
Comparing the code side-by-side of my WebChatBot <em>with</em> and <em>without</em> LUIS, one of the first changes in adding LUIS to the Node.js code is grabbing the URL for my LUIS model. (Note: We have to put that inside an <strong>environmental variable</strong> to keep it secret, because it does contain a key that could be used by anyone who sees the code. Please take precautions to treat that LUIS URL like you would any other secure token of information.)

<a href="https://msdnshared.blob.core.windows.net/media/2017/09/temp.png"><img width="1024" height="489" class="size-large wp-image-645 aligncenter" alt="Code Comparison" src="https://msdnshared.blob.core.windows.net/media/2017/09/temp-1024x489.png" /></a>

On the line under "var model", we create a "var recognizer". With LUIS, what we do is send it a bit of information, let it figure out the <span style="color: #993366"><strong>intent</strong></span>, let it figure out those <span style="color: #008000"><strong>entities</strong></span>, which will then allow it to recognize what the user is trying to do. This LUIS recognizer is built into the framework. Then I pass in the model URL as a parameter inside the parentheses.

On the line below that, notice that when we start to build up a dialog object, rather than adding these into the bot individually, I create a <em>full dialog object</em> that fully encompasses all of the recognizers.

Feel free to see the source code and compare for yourself: <a target="_blank" href="https://github.com/SarahSexton/WebChatPush/compare/LUIS" rel="noopener noreferrer">https://github.com/SarahSexton/WebChatPush/compare/LUIS</a>
<h2><span style="text-decoration: underline">Code Sample: app.js</span></h2>
<pre><span style="color: #999999">// Set up LUIS connection</span>
<span style="color: #993366">var</span> model <span style="color: #993366">=</span> 'https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/' <span style="color: #993366">+</span> <span style="color: #3366ff">process</span>.env.<span style="color: #3366ff">LUIS_ID</span> <span style="color: #993366">+</span> '?subscription-key=' <span style="color: #993366">+</span> <span style="color: #3366ff">process</span>.env.<span style="color: #3366ff">LUIS_KEY</span> <span style="color: #993366">+</span> '&amp;verbose=true&amp;timezoneOffset=0&amp;q='
<span style="color: #993366">var</span> recognizer <span style="color: #993366">= new</span> <span style="color: #8c64ff">builder.LuisRecognizer</span>(model)
<span style="color: #993366">var</span> dialog <span style="color: #993366">= new</span> <span style="color: #8c64ff">builder.IntentDialog</span>({ recognizers<span style="color: #993366">:</span> [recognizer] })
bot.<span style="color: #8c64ff">dialog</span>('/', dialog)
<span style="color: #999999">    // =========================================================
    // LUIS Dialogs
    // =========================================================</span>
    .<span style="color: #3366ff">matches</span>('WebNavigate', [
        <span style="color: #993366">function</span> (session) {
            session.<span style="color: #3366ff">send</span>(`You surf that web!`)
        }
    ])
<span style="color: #993366">var</span> loop <span style="color: #993366">=</span> <span style="color: #3366ff">false</span>;
<span style="color: #993366">var</span> count <span style="color: #993366">=</span> <span style="color: #3366ff">1</span>;
dialog.<span style="color: #3366ff">matches</span>('StartLoop', [
    <span style="color: #993366">function</span> (session) {
        <span style="color: #993366">if</span> (<span style="color: #993366">!</span>loop) {
            loop <span style="color: #993366">=</span> <span style="color: #3366ff">true</span>;
            count <span style="color: #993366">=</span> <span style="color: #3366ff">1</span>
            <span style="color: #8c64ff">proactiveEmulation</span>(session);
        }
    }
])
    .<span style="color: #3366ff">matches</span>('Stop', [
        (session, response) <span style="color: #993366">=&gt;</span> {
            session.<span style="color: #3366ff">send</span>("Stopping loop.")
            loop <span style="color: #993366">=</span> <span style="color: #3366ff">false</span>;
        }
    ])
    .<span style="color: #8c64ff">onDefault</span>((session, results) <span style="color: #993366">=&gt;</span> {
        session.<span style="color: #3366ff">send</span>("Sorry, I did't understand that.")
        session.<span style="color: #8c64ff">beginDialog</span>('/', results)
    })

<span style="color: #993366">var</span> <span style="color: #8c64ff">proactiveEmulation</span> = (session) <span style="color: #993366">=&gt;</span> {
    <span style="color: #993366">if</span> (loop) {
        session.<span style="color: #3366ff">send</span>(`Hello, I am a web push notification! :) (${count<span style="color: #993366">++</span>})
);
        <span style="color: #3366ff">setTimeout</span>(() <span style="color: #993366">=&gt;</span> <span style="color: #8c64ff">proactiveEmulation</span>(session), <span style="color: #3366ff">5000</span>);
    }
};</pre>
With this code, if the user types in "quit," or "cease," or "end," et cetera, the bot associates it to our "Stop" intent, since we trained our LUIS app for this. (Also, just for fun, if the user mentions anything related to "websites," the bot responds with the encouraging message, "You surf that web!") If the user types in something else entirely, or gibberish, the bot will associate it to the catch-all "None" intent prebuilt into LUIS, and it responds with, "Sorry, I didn't understand that."
<h2><span style="text-decoration: underline">Conclusion</span></h2>
In conclusion, Using <a target="_blank" href="https://www.luis.ai/home/" rel="noopener noreferrer">Language Understanding Intelligent Service (LUIS)</a> in your <a target="_blank" href="https://dev.botframework.com/" rel="noopener noreferrer">Microsoft Bot Framework</a> application allows you to create chat bots that are easier for your end-users to interact with.

Check out <a target="_blank" href="https://community.dynamics.com/crm/b/nishantranaweblog/archive/2017/04/18/using-luis-ai-in-microsoft-bot-framework-part-2" rel="noopener noreferrer">Using LUIS AI in Microsoft Bot Framework – Part 2</a> to see how to implement LUIS into a C# bot in Visual Studio.

Microsoft employee <a target="_blank" href="http://KSLHacks.com" rel="noopener noreferrer">Kevin Leung</a> has some great slides on SlideShare.net explaining the process of LUIS intent and dialog flow, as well extensive steps on GitHub.
<ul>
 	<li><a target="_blank" href="https://www.slideshare.net/KevinLeung52/leveling-up-your-bot-with-language-intelligence" rel="noopener noreferrer">https://www.slideshare.net/KevinLeung52/leveling-up-your-bot-with-language-intelligence</a></li>
 	<li><a target="_blank" href="http://github.com/KSLHacks/BotScheduleDemo" rel="noopener noreferrer">http://github.com/KSLHacks/BotScheduleDemo </a></li>
</ul>
Demo video:  <a target="_blank" href="https://mva.microsoft.com/en-US/training-courses/getting-started-with-bots-16759?l=7F1YPDIyC_7004668937" rel="noopener noreferrer">Creating Bots in the Microsoft Bot Framework using Node.js</a>  Microsoft Virtual Academy

Documentation: <a target="_blank" href="https://docs.botframework.com" rel="noopener noreferrer">docs.botframework.com</a>

<a target="_blank" href="https://luis.ai/home" rel="noopener noreferrer">https://luis.ai/home</a>

<strong>I hope this helps you find success using Microsoft Cognitive Services to take your chat bot from simple to smart!</strong>
<ul>
 	<li><a target="_blank" href="https://blogs.msdn.microsoft.com/sarahsays/2016/06/01/microsoft-bot-framework-part-1/" rel="noopener noreferrer">Microsoft Bot Framework Part 1: Getting Started</a></li>
 	<li><a target="_blank" href="https://blogs.msdn.microsoft.com/sarahsays/2016/06/01/microsoft-bot-framework-part-2/" rel="noopener noreferrer">Microsoft Bot Framework Part 2: Hello World</a></li>
 	<li><a target="_blank" href="https://blogs.msdn.microsoft.com/sarahsays/2016/06/27/microsoft-bot-framework-part-3-conversation/" rel="noopener noreferrer">Microsoft Bot Framework Part 3:Â  Conversation</a></li>
</ul>]]></content:encoded>
    </item>
  </channel>
</rss>