Hello World
Now that you have installed both Heaps and Visual Studio Code, let's create a new Heaps application.
- 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.
At this point, you can open the helloHeaps folder with VSCode by launching VSCode and navigating the main menu File > Open Folder
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.
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
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:
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:
<html>
<head><meta charset="utf-8"/><title>Hello Heaps</title></head>
<body style="margin:0;padding:0;background-color:black">
<canvas id="webgl" style="width:100%;height:100%"></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:
One 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
You can put breakpoints into your Heaps application by clicking in the margin to left to the line number in your source code. You can then start again the problem and see it break at the desired position.
If you want to make sure that compilation is done every time you press F5, you can edit your .vscode/launch.json file by adding a preLanchTask such as the following example:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "file://${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}",
"preLaunchTask": {
"type" : "haxe",
"args" : "active configuration"
}
}
]
}Now is the time to do more!
Use the menu to explore Heaps features and APIs.