Hello World
Now that you have installed both Heaps and Visual Studio Code, let's create a new Heaps application.
- Heaps uses a
compile.hxmlfile to tell it what to compile, how and where to compile it, and which libraries to include. - The entry point of a Haxe program is a class containing a static function called
main. - A simple heaps directory structure will look like this:
.
├── .vscode/
│ └── launch.json
├── res/
├── src/
│ └── Main.hx
└── compile.hxml
- Create a new directory named
helloHeaps - Create a new file called
compile.hxml - Add the following lines to your newly created file
-cp src
-lib heaps
-js hello.js
-main Main
-debug
-
-cp srcTells haxe where to search for your code files -
-lib heapsTells haxe to import the heaps library -
-js hello.jsTells haxe to compile to javascript in the project directory -
-main MainTells haxe that Main.hx is your entry point -
-debugTells haxe to run in debug mode
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 a src folder in your project 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.
To be able to compile and debug your application directly from vscode, you need to create a launch task.
If it does not already exist, create a .vscode directory in your project folder and create a new file called launch.json.
Add the following code to the file:
{
"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, in your project directory, create a file index.html and add the following code to it:
<!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>Now, by hitting F5, the project will compile and run.
To compile without running, hit Ctrl-Shift-B and select haxe : active configuration
If everything works well, you should now have both hello.js and hello.js.map files created in your project folder:
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 and see it break at the desired position.
