Browse Source

setup

master
Katta Kavya 5 years ago
parent
commit
6f66970723
3 changed files with 71 additions and 61 deletions
  1. +71
    -61
      Getting-started.md
  2. BIN
      images/Thumbs.db
  3. +0
    -0
      images/syserr.png

+ 71
- 61
Getting-started.md View File

@@ -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. 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). [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. 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). (https://www.sts-tutorial.com/download/api-ms-win-crt-heap-l1-1-0).


####Setup:
#### Setup:
Run in the command prompt 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 -lib heaps
-js hello.js -js hello.js
-main Main -main Main
-debug -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 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 Creating Hello World
Create a new Main.hx in the directory and put the following content 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() { override function init() {
var tf = new h2d.Text(hxd.res.DefaultFont.get(), s2d); var tf = new h2d.Text(hxd.res.DefaultFont.get(), s2d);
tf.text = "Hello World !"; tf.text = "Hello World !";
@@ -53,47 +63,47 @@ Create a new Main.hx in the directory and put the following content
static function main() { static function main() {
new 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 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: 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:


<!DOCTYPE> <!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>
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.
<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>
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", "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", "url": "file://${workspaceFolder}/index.html",
Now Run again (through the menu or F5) and the browser should open and display Hello World 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/

BIN
images/Thumbs.db View File


images/system error.png → images/syserr.png View File


Loading…
Cancel
Save