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/system error.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:
[Download](Visual Studio Code).
	#####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/