| @@ -1,51 +1,61 @@ | |||
| #Getting Started: | |||
| # Getting Started: | |||
| ####Introduction: | |||
| #### 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, | |||
| #### 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 | |||
| 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 | |||
| • If you are getting this error, | |||
|  | |||
| • 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: | |||
| #### Setup: | |||
| Run in the command prompt | |||
| #####haxelib install heaps | |||
| 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) | |||
| ####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) | |||
| • 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. | |||
|  | |||
| 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: | |||
| #### 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: | |||
| • 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: | |||
| ##### Example: | |||
| Creating Hello World | |||
| Create a new Main.hx in the directory and put the following content | |||
| class Main extends hxd.App { | |||
| class Main extends hxd.App { | |||
| override function init() { | |||
| var tf = new h2d.Text(hxd.res.DefaultFont.get(), s2d); | |||
| tf.text = "Hello World !"; | |||
| @@ -53,47 +63,47 @@ Create a new Main.hx in the directory and put the following content | |||
| static function main() { | |||
| new Main(); | |||
| } | |||
| } | |||
| } | |||
| • This example creates a Heaps Text component, adds it to the 2D scene s2d and set its text. | |||
| • This example creates a Heaps Text component, adds it to the 2D scene s2d and set its text. | |||
| ####Compile Output: | |||
| #### 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 ) | |||
| • 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) | |||
| • 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) | |||
| • If everything works well, you should now have both hello.js and hello.js.map files created in your helloHeaps folder: | |||
|  | |||
| ####Run in Browser: | |||
| #### 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. | |||
| <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: | |||
|  | |||
| • 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", | |||
| @@ -111,7 +121,7 @@ You can either setup a web server on localhost:8080 to display the content, or | |||
| "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/ | |||
| #### Reference:https://heaps.io/ | |||