/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// HelloCircle: The main "Hello" display.
var HelloCircle = Container.expand(function () {
var self = Container.call(this);
var circle = self.attachAsset('helloCircle', {
anchorX: 0.5,
anchorY: 0.5
});
self.circle = circle;
// "Hello" text
var helloText = new Text2('Hello!', {
size: 200,
fill: 0xFFFFFF
});
helloText.anchor.set(0.5, 0.5);
helloText.x = 0;
helloText.y = 0;
self.addChild(helloText);
return self;
});
// TapEffect: A quick expanding/fading effect when the user taps.
var TapEffect = Container.expand(function () {
var self = Container.call(this);
var effect = self.attachAsset('tapEffect', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.7
});
self.effect = effect;
// Animate: expand and fade out, then destroy self
self.play = function () {
self.scaleX = 0.5;
self.scaleY = 0.5;
self.alpha = 0.7;
tween(self, {
scaleX: 2,
scaleY: 2,
alpha: 0
}, {
duration: 400,
easing: tween.easeOut,
onFinish: function onFinish() {
self.destroy();
}
});
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x222244
});
/****
* Game Code
****/
// We'll use tween for the animation.
// No custom assets needed for this simple game. We'll use a friendly colored ellipse for the "Hello" and a box for the tap effect.
// Center coordinates
var centerX = 2048 / 2;
var centerY = 2732 / 2;
// Add the HelloCircle to the center
var helloCircle = new HelloCircle();
helloCircle.x = centerX;
helloCircle.y = centerY;
game.addChild(helloCircle);
// "Tap to Start" text
var tapText = new Text2('Tap anywhere to start', {
size: 100,
fill: 0xFFFDE7
});
tapText.anchor.set(0.5, 0);
LK.gui.bottom.addChild(tapText);
// State: has the game started?
var started = false;
// Handle tap (down) anywhere on the game
game.down = function (x, y, obj) {
if (!started) {
started = true;
// Animate the helloCircle: scale up and fade out
tween(helloCircle, {
scaleX: 1.5,
scaleY: 1.5,
alpha: 0
}, {
duration: 600,
easing: tween.easeInOut,
onFinish: function onFinish() {
helloCircle.destroy();
}
});
// Animate the tapText: fade out and move down
tween(tapText, {
y: tapText.y + 100,
alpha: 0
}, {
duration: 500,
easing: tween.easeIn,
onFinish: function onFinish() {
tapText.destroy();
}
});
}
// Show tap effect at tap location (in game coordinates)
var effect = new TapEffect();
effect.x = x;
effect.y = y;
game.addChild(effect);
effect.play();
};
// No need for update or other handlers for this simple demo. ===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,121 @@
-/****
+/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+
+/****
+* Classes
+****/
+// HelloCircle: The main "Hello" display.
+var HelloCircle = Container.expand(function () {
+ var self = Container.call(this);
+ var circle = self.attachAsset('helloCircle', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.circle = circle;
+ // "Hello" text
+ var helloText = new Text2('Hello!', {
+ size: 200,
+ fill: 0xFFFFFF
+ });
+ helloText.anchor.set(0.5, 0.5);
+ helloText.x = 0;
+ helloText.y = 0;
+ self.addChild(helloText);
+ return self;
+});
+// TapEffect: A quick expanding/fading effect when the user taps.
+var TapEffect = Container.expand(function () {
+ var self = Container.call(this);
+ var effect = self.attachAsset('tapEffect', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ alpha: 0.7
+ });
+ self.effect = effect;
+ // Animate: expand and fade out, then destroy self
+ self.play = function () {
+ self.scaleX = 0.5;
+ self.scaleY = 0.5;
+ self.alpha = 0.7;
+ tween(self, {
+ scaleX: 2,
+ scaleY: 2,
+ alpha: 0
+ }, {
+ duration: 400,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ self.destroy();
+ }
+ });
+ };
+ return self;
+});
+
+/****
* Initialize Game
-****/
+****/
var game = new LK.Game({
- backgroundColor: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0x222244
+});
+
+/****
+* Game Code
+****/
+// We'll use tween for the animation.
+// No custom assets needed for this simple game. We'll use a friendly colored ellipse for the "Hello" and a box for the tap effect.
+// Center coordinates
+var centerX = 2048 / 2;
+var centerY = 2732 / 2;
+// Add the HelloCircle to the center
+var helloCircle = new HelloCircle();
+helloCircle.x = centerX;
+helloCircle.y = centerY;
+game.addChild(helloCircle);
+// "Tap to Start" text
+var tapText = new Text2('Tap anywhere to start', {
+ size: 100,
+ fill: 0xFFFDE7
+});
+tapText.anchor.set(0.5, 0);
+LK.gui.bottom.addChild(tapText);
+// State: has the game started?
+var started = false;
+// Handle tap (down) anywhere on the game
+game.down = function (x, y, obj) {
+ if (!started) {
+ started = true;
+ // Animate the helloCircle: scale up and fade out
+ tween(helloCircle, {
+ scaleX: 1.5,
+ scaleY: 1.5,
+ alpha: 0
+ }, {
+ duration: 600,
+ easing: tween.easeInOut,
+ onFinish: function onFinish() {
+ helloCircle.destroy();
+ }
+ });
+ // Animate the tapText: fade out and move down
+ tween(tapText, {
+ y: tapText.y + 100,
+ alpha: 0
+ }, {
+ duration: 500,
+ easing: tween.easeIn,
+ onFinish: function onFinish() {
+ tapText.destroy();
+ }
+ });
+ }
+ // Show tap effect at tap location (in game coordinates)
+ var effect = new TapEffect();
+ effect.x = x;
+ effect.y = y;
+ game.addChild(effect);
+ effect.play();
+};
+// No need for update or other handlers for this simple demo.
\ No newline at end of file