From de1b4627a0da543a5bee1d0d6499e521da07d292 Mon Sep 17 00:00:00 2001 From: Hristo Kanchev Date: Tue, 22 Oct 2024 19:52:08 +0300 Subject: [PATCH 1/2] Updated H2D - Objects, Scenes and Layers documentation. --- Layers.md | 19 +++++++++++-------- Object-trees.md | 15 ++++++++++++--- Objects.md | 2 +- Scenes.md | 44 ++++++++++++++++++-------------------------- 4 files changed, 42 insertions(+), 38 deletions(-) diff --git a/Layers.md b/Layers.md index d464a2c..9402a70 100644 --- a/Layers.md +++ b/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 = []; 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. \ No newline at end of file +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. \ No newline at end of file diff --git a/Object-trees.md b/Object-trees.md index 615f63b..646e3ee 100644 --- a/Object-trees.md +++ b/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 diff --git a/Objects.md b/Objects.md index 36724d1..c114869 100644 --- a/Objects.md +++ b/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`). diff --git a/Scenes.md b/Scenes.md index 3c2eb08..c0174bd 100644 --- a/Scenes.md +++ b/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. +``` \ No newline at end of file From 74c87d0612de442ed7b88aad0a449cd832606806 Mon Sep 17 00:00:00 2001 From: Hristo Kanchev Date: Wed, 23 Oct 2024 20:42:41 +0300 Subject: [PATCH 2/2] Fixed broken links --- H2D-Introduction.md | 2 +- Objects.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/H2D-Introduction.md b/H2D-Introduction.md index cc683f6..08e1776 100644 --- a/H2D-Introduction.md +++ b/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]]. diff --git a/Objects.md b/Objects.md index c114869..726357d 100644 --- a/Objects.md +++ b/Objects.md @@ -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