diff --git a/Getting-started.md b/Getting-started.md index 6954992..90acd6b 100644 --- a/Getting-started.md +++ b/Getting-started.md @@ -1,51 +1,61 @@ -#Getting Started: +# Getting Started: -####Introduction: +#### 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, +#### 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 +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 + +• If you are getting this error, + +![](images/syserr.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: +#### Setup: Run in the command prompt - #####haxelib install heaps + haxelib install heaps + +#### Editor - Installation & Setup : +• The recommended editor for creating Heaps applications is Visual Studio Code: +The recommended editor for creating Heaps applications is Visual Studio Code:download +[Visual Studio Code](https://code.visualstudio.com/download) -####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) +• 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: +#### 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: +• 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: +##### Example: Creating Hello World Create a new Main.hx in the directory and put the following content - class Main extends hxd.App { + + class Main extends hxd.App { override function init() { var tf = new h2d.Text(hxd.res.DefaultFont.get(), s2d); tf.text = "Hello World !"; @@ -53,47 +63,47 @@ Create a new Main.hx in the directory and put the following content static function main() { new Main(); } - } + } - • This example creates a Heaps Text component, adds it to the 2D scene s2d and set its text. +• This example creates a Heaps Text component, adds it to the 2D scene s2d and set its text. -####Compile Output: +#### 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 ) +• 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) +• 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) +• 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: +#### 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: - - - - Hello Heaps - - - - - - - - -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. + + + + Hello Heaps + + + + + + + + +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", @@ -111,7 +121,7 @@ You can either setup a web server on localhost:8080 to display the content, or "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) +![](images/hello.png) -####Reference:https://heaps.io/ +#### Reference:https://heaps.io/ diff --git a/images/Thumbs.db b/images/Thumbs.db index 0572766..dba7bdd 100644 Binary files a/images/Thumbs.db and b/images/Thumbs.db differ diff --git a/images/system error.png b/images/syserr.png similarity index 100% rename from images/system error.png rename to images/syserr.png