|
|
|
@@ -0,0 +1,117 @@ |
|
|
|
#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/ |
