forge
/
heaps-tutorial

# Getting Started:

#### Introduction:
Heaps is an open source and multi-platform toolkit to create 2D and 3D games.

#### Installation:
• To use Heaps.io, you need to install Haxe 3.4+ 

• Later, Download the Heaps,
     [install](https://www.microsoft.com/en-ph/download/details.aspx?id=48145&751be11f-ede8-5a0c-058c-2ee190a24fa6=True).
	
For windows 8: (incase you are facing with error)

• If you are using windows 8, download Windows installer/Windows Binaries
	Check in the heaps folder whether its running fine or not.
    
• If you are getting this  error, 

![](images/syserr.png)

• Then please follow  this link and download ,in  your heap directory,  manually we are installing it
	(https://www.sts-tutorial.com/download/api-ms-win-crt-heap-l1-1-0).

#### Setup:
   Run in the command prompt
    haxelib install heaps

#### Editor - Installation & Setup :
• The recommended editor for creating Heaps applications is Visual Studio Code:
The recommended editor for creating Heaps applications is Visual Studio Code:download
[Visual Studio Code](https://code.visualstudio.com/download)	

• Install Haxe Extension Pack:
	Click on the Extension panel (fourth icon on the left side bar of VSCode), search haxe and install Haxe Extension Pack that will contain everything you need for Haxe support.
![](images/extensions.png)
   
 If your VSCode is up to date (after v1.31), you're good to go. Otherwise, restart VSCode once installation is complete (you can click the Reload label that should be showing)

#### Project creation & compilation:
• Create a new directory helloHeaps

• Create into it a file compile.hxml: this file will contain your Haxe compilation parameters and the libraries you are using.

• Edit the compile.hxml (with VSCode or any other text editor) to set the following content:

    -lib heaps
    -js hello.js
    -main Main
    -debug
• This will tell the compiler that we are using the library Heaps, that we will compile to JavaScript hello.js output, and that our main class should be Main.hx file.
• The -debug file allows generation of source maps in order to be able to debug your JS application.
#### Open with  VSCode:
At this point, you can open the helloHeaps folder with VSCode by launching VSCode and navigating the main menu File > Open Folder
##### Example:
Creating Hello World
Create a new Main.hx in the directory and put the following content
    
            class Main extends hxd.App {
    override function init() {
        var tf = new h2d.Text(hxd.res.DefaultFont.get(), s2d);
        tf.text = "Hello World !";
    }
    static function main() {
        new Main();
    }
       }
    
• This example creates a Heaps Text component, adds it to the 2D scene s2d and set its text.
	
#### Compile Output:

• In order to compile, you need to create a Build task with VSCode, this can be done by going into the VSCode menu and select Terminal > Configure Default Build Task 
          Or ( you can use the command to get  the Terminal:Ctrl+Shift+P) 
 
Select haxe : active configuration

• You can now compile with Shift-Ctrl+B  (or by going Terminal > Run Build Task)

• If everything works well, you should now have both hello.js and hello.js.map files created in your helloHeaps folder:
![](images/content.png)

#### Run in Browser:
In order to run our example, we need to embed it into a web page. Create a file named index.html with the following content:

        <!DOCTYPE>
    <html>
    <head>
        <meta charset="utf-8"/>
           <title>Hello Heaps</title>
        <style>
            body { margin:0;padding:0;background-color:black; }
            canvas#webgl { width:100%;height:100%; } 
        </style>
    </head>
    <body>
        <canvas id="webgl"></canvas>
        <script type="text/javascript" src="hello.js"></script>
    </body>
            </html>

In order to Run with Chrome, you need Chrome Debugger VSCode extension. Open again the Extension manager and search for Chrome to install it:

![](images/chrome.png)

• Once installed, press F5 or do Debug > Start Debugging. This should give you the choice to Debug with Chrome. If not, restart VSCode so the extension is activated.
• If you click on Chrome label, it will open you a .vscode/launch.json similar to the tasks.json we had earlier for compiling.

    {
	"version": "0.2.0",
	"configurations": [
		{
			"type": "chrome",
			"request": "launch",
			"name": "Launch Chrome against localhost",
			"url": "http://localhost:8080",
			"webRoot": "${workspaceFolder}"
		}
	]
    }
You can either setup a web server on localhost:8080 to display the content, or either simply replace the url using the following value:

 "url": "file://${workspaceFolder}/index.html",
Now Run again (through the menu or F5) and the browser should open and display Hello World
![](images/hello.png)


#### Reference:https://heaps.io/