Updated H2D sections - Objects, ObjectTrees, Scenes, Layers (#102)

Author: hristo-kanchev

H2D-Introduction.md

@@ -54,6 +54,6 @@ The underlying `h2d.Object` (from which `h2d.Bitmap` inherits) provides the bitm
 
 ![h2d_introduction_helloworld2](https://user-images.githubusercontent.com/88530062/174428357-45f857ed-30bf-450d-99b6-72051f5b0b83.png)
 
-The [next section](Objects) will discuss `h2d.Object` a bit closer.
+The [next section](https://heaps.io/documentation/objects.html) will discuss `h2d.Object` a bit closer.
 
 And as said `h2d.Tile` which the bitmap required will be discussed in a later section: [[Graphical surfaces]].

Layers.md

@@ -6,7 +6,7 @@ When using any `h2d.Scene` (`s2d` when inside `hxd.App`) you have all features o
 
 Basically you have two features here:
 
-1. The first is you can place `h2d.Object`s at specific layers by `s2d.addChildAt( myobj, MY_LAYER )`. `0` will be the layer the most in the background, while each higher layer is rendered over/above the precedent layer. Usually you predefine your layer indices in some way for instance by `final MY_LAYER_NAME : Int = 23;` (see in the sample below) so you know what each integer (`Int` value) stands for.
+1. The first is you can place `h2d.Object`s at specific layers by `s2d.add( myobj, MY_LAYER )`. `0` will be the layer the most in the background, while each higher layer is rendered over/above the precedent layer. Usually you predefine your layer indices in some way for instance by `final MY_LAYER_NAME : Int = 23;` (see in the sample below) so you know what each integer (`Int` value) stands for.
 
 2. The second feature is that the layer class also allows to control objects individually by `.over()` and `.under()`. Finally you can benefit from the `ysort()` method to order a layer. *In the sample below this will prevent housings to overlap in a weird way. A house farther away from our viewpoint should be rendered behind houses that are closer!*
 
@@ -18,13 +18,16 @@ Note that the clouds are on top of all other objects. The green soil stains (mea
 
 ```haxe
 
-class LayersDemo extends hxd.App {
+class Main extends hxd.App {
     var clouds : Array<h2d.Object> = [];
     var LAYER_FOR_SOIL : Int = 0;
     var LAYER_FOR_BUILDINGS : Int = 1;
     var LAYER_FOR_SKY : Int = 2;
-    static function main() {new LayersDemo();}
-    function new() {super();}
+
+    static function main() {
+        new Main();
+    }
+
     override function init() {
         engine.backgroundColor = 0xFF33cc33; // game's background color is now green
         for( i in 0...40 )
@@ -56,7 +59,7 @@ class LayersDemo extends hxd.App {
         g.addVertex( -20,   0, 1, 0, 0, 1 );
         g.endFill();
         set_to_random_postion( g );
-        s2d.addChildAt( g, LAYER_FOR_BUILDINGS );
+        s2d.add( g, LAYER_FOR_BUILDINGS );
         return g; // allows to receive the reference to the created object...
     }
     function add_cloud() {
@@ -75,14 +78,14 @@ class LayersDemo extends hxd.App {
         add_row_of_bubbles( 24,  0 ); // lower level of bubbles
         set_to_random_postion( g );
         clouds.push( g );
-        s2d.addChildAt( g, LAYER_FOR_SKY );
+        s2d.add( g, LAYER_FOR_SKY );
     }
     function add_soil_stain() {
         var g = new h2d.Graphics();
         g.beginFill( 0x84e184 ); // lighter green
         g.drawEllipse( 0, 0, 32 + hxd.Math.random(64), 8 + hxd.Math.random(8) );
         set_to_random_postion( g );
-        s2d.addChildAt( g, LAYER_FOR_SOIL );
+        s2d.add( g, LAYER_FOR_SOIL );
     }
     function set_to_random_postion( obj:h2d.Object ) {
         obj.setPosition( hxd.Math.random( s2d.width ), hxd.Math.random( s2d.height ) );
@@ -98,4 +101,4 @@ class LayersDemo extends hxd.App {
 }
 ```
 
-Note that all we have to use is `s2d.addChildAt( myobj, MY_LAYER )` instead of just `s2d.addChild( myobj )` and finally we use `s2d.ysort( LAYER_FOR_BUILDINGS )` to arrange all houses.
+Note that all we have to use is `s2d.add( myobj, MY_LAYER )` instead of just `s2d.addChild( myobj )` and finally we use `s2d.ysort( LAYER_FOR_BUILDINGS )` to arrange all houses.

Object-trees.md

@@ -12,10 +12,14 @@ The child objects will inherit the transformations of the parent object they hav
 ### Code
 
 ```haxe
-class ObjectTrees extends hxd.App { // ObjectTrees
+class Main extends hxd.App { // ObjectTrees
     var parent_obj  : h2d.Object;
     var a_child_obj : h2d.Object;
-    static function main() {new ObjectTrees();}
+
+    static function main() {
+        new Main();
+    }
+
     override function init() {
 
         // parent object placed on `s2d`
@@ -81,7 +85,11 @@ class Main extends hxd.App {
     var npc_deltaAlpha : Float = -0.01;
     var transitionsActive : Bool = false;
     //var npc_trans
-    static function main() {new Main();}
+
+    static function main() {
+        new Main();
+    }
+
     override function init() {
 
         clock = new h2d.Graphics( s2d );
@@ -151,6 +159,7 @@ class Main extends hxd.App {
             t.text = 'changes on clock scale\n& NPC\'s alpha: ${ ( transitionsActive ? "active" : "inactive" ) }';
         };
     }
+
     override function update(dt:Float) {
         super.update(dt);
         // clock movement

Objects.md

@@ -1,5 +1,5 @@
 # Object
-Like shown previously in the introduction to give our Heaps application visual (2D) content we need classes that are build upon `h2d.Object`.
+Like shown previously in the introduction to give our Heaps application visual (2D) content we need classes that are built upon `h2d.Object`.
 
 - An **Object** (represented by [h2d.Object](https://heaps.io/api/h2d/Object.html)) is the base class of all 2D objects, so any thing that you can *add* to the screen (so to a `h2d.Scene` to be more precise, which mainly is `s2d` when inside `hxd.App`).
 
@@ -11,7 +11,7 @@ Like shown previously in the introduction to give our Heaps application visual (
 (See more on [[Drawable]])
 
 ## Creating and adding Objects
-Objects can be added to a [scene](Scenes) directly (a `h2d.Scene`, for instance `s2d` when inside `hxd.App`) or be added to another `h2d.Object` creating an *object tree*. Object trees are regarded in the next section about [[Object trees]].
+Objects can be added to a [scene](https://heaps.io/documentation/scenes.html) directly (a `h2d.Scene`, for instance `s2d` when inside `hxd.App`) or be added to another `h2d.Object` creating an *object tree*. Object trees are regarded in the next section about [[Object trees]].
 
 ```haxe
 var a = new h2d.Object();              // object not added yet

Scenes.md

@@ -1,15 +1,13 @@
 # Scenes
-In the precedent sections we already used `s2d` which represents the active current scene rendered by the `hxd.App`.
+In the previous sections we already used `s2d` which represents the active current scene rendered by the `hxd.App`.
 
 A **Scene** (represented by [h2d.Scene](https://heaps.io/api/h2d/Scene.html)) represents any scene the user can visit in the Heaps app. Scenes may be *an intro showing the developers logo on start-up*, the *main menu of the game*, maybe a *cutscene* and finally *the level or world* where the actual game takes place and the player walks around.
 
 `h2d.Scene` (represented by [h2d.Scene](https://heaps.io/api/h2d/Scene.html)) is a special object (it is actually a `h2d.Object`, too!) which is at the root of the scene tree. In [hxd.App](https://heaps.io/api/hxd/App.html) it is accessible by using the `s2d` variable (as we have seen previously). You will need to add your objects to the scene before they can be displayed. The Scene also handles events such as clicks, touch, and keyboard keys.
 
 ```haxe
-class Myapp extends hxd.App
-{
-    override private function init():Void
-    {
+class Main extends hxd.App {
+    override private function init():Void {
         super.init();
         s2d;                            // the current scene
         var myscene = new h2d.Scene();  // create a new scene
@@ -23,7 +21,9 @@ class Myapp extends hxd.App
 
     }
 
-public static function main(){ new Myapp(); }
+    public static function main() {
+        new Main();
+    }
 }
 ```
 
@@ -36,14 +36,18 @@ You can deal with scenes mostly any way you like (like with most things in Heaps
 ![demo_on_using_scenes](https://user-images.githubusercontent.com/88530062/174429682-6debdb8e-d35c-4f3e-87d0-d3d72fe7e2b4.png)
 
 ```haxe
-class ABC extends hxd.App {
-    public static var app : ABC;                // just will represent this app as an individual object at runtime (so as an instance of this class)
-    static function main() { app = new ABC(); } // "save" the reference for access from outside later
+class Main extends hxd.App {
+    public static var app : Main;                // just will represent this app as an individual object at runtime (so as an instance of this class)
     public var myUpdateFunction : Dynamic;      // this will allow us to define the update function from other classes (see Level01)
-    public function new() {super();}
+
+    static function main() {
+        app = new Main();
+    } // "save" the reference for access from outside later
+
     override function init() {
         setScene( new Intro() );
     }
+
     override function update(dt:Float) {
         if(myUpdateFunction!=null)
             myUpdateFunction();
@@ -65,7 +69,7 @@ class Intro extends h2d.Scene {
         t.scale( 2 ); t.textColor = 0x606060;
         var t = new haxe.Timer( 3 * 1000 );
         t.run = () -> {
-            ABC.app.setScene( new MainMenu() );
+            Main.app.setScene( new MainMenu() );
             t.stop();
         };
     }
@@ -88,7 +92,7 @@ class MainMenu extends h2d.Scene {
         var button_quit = new h2d.Interactive( 300, 40, f ); button_quit.backgroundColor = 0xFFFF4040;
         //button_quit.y += 60;
         button_play.onClick = (e)->{
-            ABC.app.setScene( new Level01() );
+            Main.app.setScene( new Level01() );
         };
         button_quit.onClick = (e)->{ hxd.System.exit(); };
         var t = new h2d.Text( hxd.res.DefaultFont.get(), button_play ); t.text = "Play"; t.setPosition(8,8);
@@ -104,7 +108,7 @@ class Level01 extends h2d.Scene {
         var player = new h2d.Graphics( this ); player.setPosition( 200, 200 );
         drawSmileyFace( player );
         var t = new h2d.Text( hxd.res.DefaultFont.get(), player ); t.text = "Player"; t.setPosition(-50,50);
-        ABC.app.myUpdateFunction = () -> { player.x += 0.1; };
+        Main.app.myUpdateFunction = () -> { player.x += 0.1; };
     }
     function drawSmileyFace( g:h2d.Graphics ) {
         // face
@@ -126,16 +130,4 @@ class Level01 extends h2d.Scene {
         g.drawCircle( 20, -5, 3 );
     }
 }
-```
-
-## Scenes and camera
-
-Scenes and camera is explained here.
-
-### Sizing
-
-Scenes sizing is explained here.
-
-### Zoom
-
-Camera zoom is explained here.
+```