Hello World

installed both Heaps and Visual Studio Code, let’s create a new Heaps application.

Concepts

  • compile.hxml file to tell it what to compile, how and where to compile it, and which libraries to include.
  • main. -
    1. .├── .vscode/│   └── launch.json├── res/├── src/│   └── Main.hx└── compile.hxml

    Create your project

  • helloHeaps
  • compile.hxml -
    1. -cp src-lib heaps-js hello.js-main Main-debug
  • -cp src Tells haxe where to search for your code files
  • -lib heaps Tells haxe to import the heaps library
  • -js hello.js Tells haxe to compile to javascript in the project directory
  • -main Main Tells haxe that Main.hx is your entry point
  • -debug Tells haxe to run in debug mode hello.js output, and that our main class should be Main.hx file. -debug file allows generation of source maps in order to be able to debug your JS application.

    Open with VSCode

    helloHeaps folder with VSCode by launching VSCode and navigating the main menu File > Open Folder

    Create Hello World example

    Main.hx in a src folder in your project directory and put the following content
    1. 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();    }}
    s2d and set its text.

    Compile and run Output

    To be able to compile and debug your application directly from vscode, you need to create a launch task. .vscode directory in your project folder and create a new file called launch.json. Add the following code to the file:
    1. {    "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"            }        }    ]}
    index.html and add the following code to it:
    1. <!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>
    F5, the project will compile and run. Ctrl-Shift-B and select haxe : active configuration hello.js and hello.js.map files created in your project folder:

    Debugging

    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.