-
Notifications
You must be signed in to change notification settings - Fork 341
Hello World
Now that you have installed both Heaps and Visual Studio Code, let's create a new Heaps application.
- Heaps uses a
compile.hxml
file 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
├── out/
├── 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 # Tells haxe where to search for your code files
-lib heaps # Tells haxe to import the heaps library
-js out/hello.js # Tells haxe to compile to javascript in the out directory
-main Main # Tells haxe that Main.hx is your entry point
-debug # Tells 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}/out/index.html",
"webRoot": "${workspaceFolder}",
"preLaunchTask": {
"type" : "haxe",
"args" : "active configuration"
}
}
]
}
Now, in your out
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 out
folder:
In order to Run with Chrome, you need Chrome Debugger VSCode extension. Open again the Extension manager and search for Chrome to install it:
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.