Add hierarchy and text + bmfont tools

DzzD · Jan 23, 2021 · 4783dd6 · 4783dd6
1 parent 57650c3
commit 4783dd6
Show file tree

Hide file tree

Showing 58 changed files with 1,879 additions and 20 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
diff --git a/MarketplaceArtwork.png b/MarketplaceArtwork.png
diff --git a/MarketplaceArtworkFeature.png b/MarketplaceArtworkFeature.png
diff --git a/app/assets/android/appicon.png b/app/assets/android/appicon.png
diff --git a/app/assets/bitmapfont/KidGame.fnt b/app/assets/bitmapfont/KidGame.fnt
diff --git a/app/assets/bitmapfont/KidGame_0.png b/app/assets/bitmapfont/KidGame_0.png
diff --git a/app/assets/car.png b/app/assets/car.png
diff --git a/app/assets/html/10-BitmapFont.html b/app/assets/html/10-BitmapFont.html
diff --git a/app/assets/html/9-Hierarchy.html b/app/assets/html/9-Hierarchy.html
@@ -0,0 +1,156 @@
+	<!doctype html>
+<html>
+	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,initial-scale=1.0">
+	<link href="fonts/fonts.css" rel="stylesheet" type="text/css"/>
+	<link href="style.css" rel="stylesheet" type="text/css"/>
+	<body>
+		<h1>9 - Hierarchy</h1> 
+		<li>You can create more complex entities by using hierarchy by composing entities from differents parts.<br> 
+		<li>As an example, this tutorial show how to attach two wheels to a car.
+		<br><br>
+<div class="fileName"># myView.xml</div>
+<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:0;padding:.0;"><table><tr><td><pre style="margin: 0; line-height: 125%">1
+2
+3
+4
+5</pre></td><td><pre style="margin: 0; line-height: 125%"><span style="color: #007700">&lt;Alloy&gt;</span>
+  <span style="color: #007700">&lt;Window&gt;</span>
+    <span style="color: #007700">&lt;TIGLView</span> <span style="color: #0000CC">module=</span><span style="background-color: #fff0f0">&quot;fr.dzzd.tigl&quot;</span> <span style="color: #0000CC">onInit=</span><span style="background-color: #fff0f0">&quot;init&quot;</span> <span style="color: #0000CC">onResize=</span><span style="background-color: #fff0f0">&quot;resize&quot;</span> <span style="color: #0000CC">onLoop=</span><span style="background-color: #fff0f0">&quot;loop&quot;</span><span style="color: #007700">/&gt;</span>
+  <span style="color: #007700">&lt;/Window&gt;</span>
+<span style="color: #007700">&lt;/Alloy&gt;</span>
+</pre></td></tr></table></div>
+
+
+
+<br><br>
+<div class="fileName"># myView.js</div>
+<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:0;padding:.0;"><table><tr><td><pre style="margin: 0; line-height: 125%"> 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+46
+47
+48
+49
+50
+51
+52
+53
+54
+55
+56
+57
+58
+59
+60
+61
+62
+63</pre></td><td><pre style="margin: 0; line-height: 125%"><span style="color: #888888">/*</span>
+<span style="color: #888888"> * Import TIGL manager</span>
+<span style="color: #888888"> */</span>
+<span style="color: #008800; font-weight: bold">const</span> TIGLManager <span style="color: #333333">=</span> require(<span style="background-color: #fff0f0">&quot;tiglmanager&quot;</span>);
+
+<span style="color: #888888">/*</span>
+<span style="color: #888888"> * Some globals vars</span>
+<span style="color: #888888"> */</span>
+<span style="color: #008800; font-weight: bold">var</span> tm;
+<span style="color: #008800; font-weight: bold">var</span> car;
+<span style="color: #008800; font-weight: bold">var</span> wheel1;
+<span style="color: #008800; font-weight: bold">var</span> wheel2;
+<span style="color: #008800; font-weight: bold">var</span> width;
+<span style="color: #008800; font-weight: bold">var</span> height;
+
+<span style="color: #888888">/*</span>
+<span style="color: #888888"> * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit=&quot;init&quot;)</span>
+<span style="color: #888888"> */</span>
+<span style="color: #008800; font-weight: bold">function</span> init()
+{
+    <span style="color: #888888">/*</span>
+<span style="color: #888888">     * Create and initialise TIGL manager</span>
+<span style="color: #888888">     */</span>
+    tm <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> TIGLManager(<span style="color: #008800; font-weight: bold">this</span>);
+    car <span style="color: #333333">=</span> tm.addSprite({url<span style="color: #333333">:</span> <span style="background-color: #fff0f0">&quot;Resources/car.png&quot;</span>, px<span style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">256</span>, py<span style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">100</span>});
+    wheel1 <span style="color: #333333">=</span> tm.addSprite({url<span style="color: #333333">:</span> <span style="background-color: #fff0f0">&quot;Resources/wheel.png&quot;</span>, px<span style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">40</span>, py<span style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">40</span>, x<span style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">123</span>, y<span style="color: #333333">:</span><span style="color: #0000DD; font-weight: bold">153</span>});
+    wheel2 <span style="color: #333333">=</span> tm.addSprite({url<span style="color: #333333">:</span> <span style="background-color: #fff0f0">&quot;Resources/wheel.png&quot;</span>, px<span style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">40</span>, py<span style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">40</span>, x<span style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">430</span>, y<span style="color: #333333">:</span><span style="color: #0000DD; font-weight: bold">153</span>});
+
+    <span style="color: #888888">/*</span>
+<span style="color: #888888">     * Set wheels as childs of car</span>
+<span style="color: #888888">     */</span>
+    wheel1.parent <span style="color: #333333">=</span> car;
+    wheel2.parent <span style="color: #333333">=</span> car;
+}
+
+
+<span style="color: #888888">/*</span>
+<span style="color: #888888"> * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize=&quot;resize&quot;)</span>
+<span style="color: #888888"> */</span> 
+<span style="color: #008800; font-weight: bold">function</span> resize(e)
+{
+    width <span style="color: #333333">=</span> e.width;
+    height <span style="color: #333333">=</span> e.height;
+    car.x <span style="color: #333333">=</span> width <span style="color: #333333">/</span><span style="color: #0000DD; font-weight: bold">2</span>;
+    car.y <span style="color: #333333">=</span> height <span style="color: #333333">/</span><span style="color: #0000DD; font-weight: bold">2</span>;
+}
+
+<span style="color: #888888">/*</span>
+<span style="color: #888888"> * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop=&quot;loop&quot;)</span>
+<span style="color: #888888"> */</span> 
+<span style="color: #008800; font-weight: bold">function</span> loop()
+{
+    <span style="color: #888888">/*</span>
+<span style="color: #888888">     * Rotate wheels</span>
+<span style="color: #888888">     */</span>
+    wheel1.r <span style="color: #333333">=</span> wheel2.r <span style="color: #333333">=</span> <span style="color: #007020">Date</span>.now() <span style="color: #333333">*</span> <span style="color: #6600EE; font-weight: bold">0.5</span>;
+
+
+    <span style="color: #888888">/*</span>
+<span style="color: #888888">     * Rotate car</span>
+<span style="color: #888888">     */</span>
+    car.r <span style="color: #333333">=</span> <span style="color: #0000DD; font-weight: bold">10</span><span style="color: #333333">*</span><span style="color: #007020">Math</span>.sin(<span style="color: #007020">Date</span>.now() <span style="color: #333333">*</span> <span style="color: #6600EE; font-weight: bold">0.001</span>);
+}
+</pre></td></tr></table></div>
+
+
+	</body>
+</html>
diff --git a/app/assets/html/style.css b/app/assets/html/style.css
@@ -13,13 +13,18 @@ body
 	border-top: 0;
 	padding: 20px;
 	overflow: auto;
-	font-size:14;
+	font-size:14px;
+}
+
+h1
+{
+	font-size:24px;
 }
 
 .fileName
 {
 	font-weight:bold;
 	color:#000000;
 	margin-bottom:15px;
-	font-size: 20px;
-}
+	font-size: 16px;
+}
diff --git a/app/assets/textBackground.png b/app/assets/textBackground.png
diff --git a/app/assets/wheel.png b/app/assets/wheel.png
diff --git a/app/controllers/demos/10-BitmapFont.js b/app/controllers/demos/10-BitmapFont.js
@@ -0,0 +1,104 @@
+/*
+ * Import TIGL manager & tweenjs(https://github.com/tweenjs/tween.js/)
+ */
+const TIGLManager = require("tiglmanager");
+const Tween = require("tween.cjs");
+
+/*
+ * Some globals vars
+ */
+var tm;
+var textA;
+var sprite;
+var textB;
+var width;
+var height;
+var counter = 0;
+var tween = null;
+
+/*
+ * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit="init")
+ */
+function init()
+{
+    /*
+     * Create and initialise TIGL manager
+     */
+    tm = new TIGLManager(this);
+
+    /*
+     * If font is not specified, Arial font embeded in module will be used
+     * Also if not specified color default to grey, outline to transparent and fontSize to bitmapfont size
+     */
+    textA = tm.addText({text: ""});
+
+    /*
+     * Ofcourse hierarchy work also on texts
+     */
+    sprite = tm.addSprite({url: "Resources/textBackground.png"});
+    sprite.px = sprite.width/2;
+    sprite.py = sprite.height/2;
+    sprite.parent = textA;
+
+    /*
+     * In addition to commons properties there are some specifics properties for Text :
+     * - font
+     * - fontSize
+     * - color
+     * - outlineColor
+     */
+    textB = tm.addText({font : "Resources/bitmapfont/KidGame.fnt", text: "KIDGAME FONT!", color: "green", outlineColor: "white", r: 90, fontSize: 64, sx: 0.8, sy: 0.8});
+
+
+
+}
+
+
+/*
+ * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
+ */ 
+function resize(e)
+{
+    width = e.width;
+    height = e.height;
+
+    textB.px = textB.width/2;
+    textB.py = textB.height/2;
+    textB.x = width - 50;
+    textB.y = height/2;
+
+    textA.x = width/2;
+    textA.y = height/2;
+
+
+
+    /*
+     * As other entities, tweening can be used to animate Text
+     */
+    if(tween)
+    {
+        tween.stop();
+    }
+    tween = new Tween.Tween(textB)
+                .to({x: width/2 , y: 50, r: 0, sx: 1.2, sy: 1.5}, 2000)
+                .easing(Tween.Easing.Elastic.InOut).yoyo(true)
+                .repeat(Infinity).start();
+}
+
+/*
+ * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
+ */ 
+function loop()
+{
+    /*
+     * Update text entities
+     */
+    textA.text = "C-" + counter++;
+    textA.px = textA.width/2;
+    textA.py = 32;
+    sprite.x = textA.width/2;
+    sprite.y = textA.height/2 + 8;
+    textA.r++;
+
+    Tween.update(); //Requiere to update tweens
+}
diff --git a/app/controllers/demos/8-FlappyBird.js b/app/controllers/demos/8-FlappyBird.js
@@ -58,7 +58,6 @@ function init()
     /*
      * Load Ground
      */
-    // ground = tm.addSprite({url: "Resources/flappyBird/ground.png", width: 256*50, height: 256, tile: true, layer: 5});
     ground = tm.addSprite({url: "Resources/flappyBird/ground.png", width: 256*50, height: 256, tile: true, layer: 5});
 
     /*

diff --git a/app/controllers/demos/9-Hierarchy.js b/app/controllers/demos/9-Hierarchy.js
@@ -0,0 +1,63 @@
+/*
+ * Import TIGL manager
+ */
+const TIGLManager = require("tiglmanager");
+
+/*
+ * Some globals vars
+ */
+var tm;
+var car;
+var wheel1;
+var wheel2;
+var width;
+var height;
+
+/*
+ * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit="init")
+ */
+function init()
+{
+    /*
+     * Create and initialise TIGL manager
+     */
+    tm = new TIGLManager(this);
+    car = tm.addSprite({url: "Resources/car.png", px: 256, py: 100, layer: 1});
+    wheel1 = tm.addSprite({url: "Resources/wheel.png", px: 40, py: 40, x: 123, y:153, layer: 2});
+    wheel2 = tm.addSprite({url: "Resources/wheel.png", px: 40, py: 40, x: 430, y:153, layer: 2});
+
+    /*
+     * Set wheels as childs of car
+     */
+    wheel1.parent = car;
+    wheel2.parent = car;
+}
+
+
+/*
+ * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
+ */ 
+function resize(e)
+{
+    width = e.width;
+    height = e.height;
+    car.x = width /2;
+    car.y = height /2;
+}
+
+/*
+ * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
+ */ 
+function loop()
+{
+    /*
+     * Rotate wheels
+     */
+    wheel1.r = wheel2.r = Date.now() * 0.5;
+
+
+    /*
+     * Rotate car
+     */
+    car.r = 10*Math.sin(Date.now() * 0.001);
+}
diff --git a/app/controllers/index.js b/app/controllers/index.js
@@ -55,6 +55,19 @@ function open8FlappyBird()
 }
 
 
+function open9Hierarchy()
+{
+	var view = Alloy.createController('demos/9-Hierarchy').getView();
+	view.open();
+}
+
+function open10BitmapFont()
+{
+	var view = Alloy.createController('demos/10-BitmapFont').getView();
+	view.open();
+}
+
+
 function openMoreDemo()
 {
 	var dialog = Ti.UI.createAlertDialog({

diff --git a/app/platform/android/res/drawable-hdpi/appicon.png b/app/platform/android/res/drawable-hdpi/appicon.png
diff --git a/app/platform/android/res/drawable-mdpi/appicon.png b/app/platform/android/res/drawable-mdpi/appicon.png
diff --git a/app/platform/android/res/drawable-xhdpi/appicon.png b/app/platform/android/res/drawable-xhdpi/appicon.png
diff --git a/app/platform/android/res/drawable-xxhdpi/appicon.png b/app/platform/android/res/drawable-xxhdpi/appicon.png
diff --git a/app/platform/android/res/drawable-xxxhdpi/appicon.png b/app/platform/android/res/drawable-xxxhdpi/appicon.png
diff --git a/app/styles/demos/10-BitmapFont.tss b/app/styles/demos/10-BitmapFont.tss
@@ -0,0 +1,19 @@
+
+
+"Window" : 
+{
+    title: "  TIGL: Texts & BitmapFont"
+}
+
+
+
+'TIGLView' :
+{
+	backgroundColor: "#CCCCFF",
+}
+
+
+'WebView' :
+{
+	url: "/html/10-BitmapFont.html" 
+}