Stephan

add a hitArea to your container: init: function() { var box = new game.Graphics(); box.fillColor = '#ff0000'; box.drawRect(0, 0, 100, 100); box.position.set(0,200); var cont = new game.Container(); box.addTo(cont); cont.interactive = true; //add a hitArea cont.hitArea = new game.Rectangle(100, 100); cont.click = function() { cont.removeAll(); cont.remove(); }; cont.addTo(this.stage); }

In the past I have implemented some sort of scrolling mechanism. Before you start implementing one, you must realize that Panda isn't the best environment for scrollable UI elements. Your best approach is probably to use swipe 'UP' and swipe 'DOWN' to move a custom container up and down. In this container you can put your data rows and customize them as needed. A small code snippet from my implementation: game.createClass('YourContainer', 'Container', { init: function(){ //add your data rows }, //..... swipe: function(dir) { if (dir === 'DOWN') { if(this.tweenSwipe) this.tweenSwipe.stop(); var yTo = this.position.y + 120; if(yTo>this.h - game.height) yTo = this.h - game.height; this.tweenSwipe = new game.Tween(this.position); this.tweenSwipe.to({y: yTo}, 500); this.tweenSwipe.easing('Quadratic.InOut'); this.tweenSwipe.start(); } else if (dir === 'UP'){ if(this.tweenSwipe) this.tweenSwipe.stop(); var yTo = this.position.y - 120; if(yTo < 0) yTo = 0; this.tweenSwipe = new game.Tween(this.position); this.tweenSwipe.to({y: yTo}, 500); this.tweenSwipe.easing('Quadratic.InOut'); this.tweenSwipe.start(); } }, });

yes you can: var button = new game.Button('button.png', game.width / 2, 120, function() { console.log('Button clicked'); }); button.rotate(true); button.addTo(this.stage); var text = new game.Text('Button'); text.x = game.width / 2 - text.width / 2; text.y = 20; text.addTo(this.stage); //scale the button up button.sprite.scale.set(2, 2) //make sure this one is disabled!!!! //button.scaleIn();

Well done! 😊

Yeah, bring it on!

That is great. Well done! I am happy to hear you resolved the issue. 😃

Good approach. In the end you need a valid zip file to upload and it is expected that you have to make some custom adjustments in the process before you upload it. you might also try to upload the old (working) game again and see if it succeeds or fails. This might help you to figure out how a valid zip looks like.

Can you check if there is a fbapp-config.json file in the root of your zip file? see also: https://developers.facebook.com/docs/games/instant-games/bundle-config

Here it is, a small System Text plugin with 3 features: 1) typewriter effect 2) strokeColor (border) 3) example how to use gradient colors with systemText in Panda. Please note that I included a custom font in the project to achieve the second and third example. See the demo project for files ans details at: https://github.com/stephanvermeire/systemtextplugin Quick example (typewrite effect not working here because it is a static image): systemtextplugin.js game.module( 'plugin.systemtextplugin' ) .require( 'engine.renderer.text' ) .body(function() { game.SystemText.inject({ /** Enable typewriter-effect @default false **/ typing_effect: false, i: 1, /** StrokeColor of the text. @property {String} color @default #000 **/ strokeColor: '#000', /** Width of the text stroke. @property {Number} color @default 0 **/ lineWidth: 0, _renderCanvas: function(context) { var wt = this._worldTransform; context.globalAlpha = this._worldAlpha; context.setTransform(wt.a, wt.b, wt.c, wt.d, wt.tx * game.scale, (wt.ty + this.size) * game.scale); context.fillStyle = this.color; context.font = this.size * game.scale + 'px ' + this.font; context.textAlign = this.align; context.strokeStyle = this.strokeColor; context.lineWidth = this.lineWidth; if(this.text === undefined) return; var lines; if(this.typing_effect){ lines = String(this.text.substr(0, this.i)).split('\n'); if(this.i <= this.text.length){ this.i++; } }else{ lines = this.text.split('\n'); } for (var i = 0; i<lines.length; i++){ context.fillText(lines[i], 0, (i*this.size) ); if(this.lineWidth){ context.strokeText(lines[i], 0, (i*this.size)); } } } }); }); main.js game.module( 'game.main' ) .require( 'plugin.systemtextplugin' ) .body(function () { game.createScene('Main', { init: function () { //typewriter demo new game.SystemText('Lorem ipsum dolor sit amet,\nconsectetuer adipiscing elit.\nSed posuere interdum sem.', { size: 50, x: 0, y: 0, typing_effect: true, }).addTo(this.stage); //custom font with strokeColor new game.SystemText('Lorem ipsum dolor sit amet,', { font: 'SoSweetHoney', // align: 'left', color: '#2d963b', strokeColor: '#a2e65e', lineWidth: 2, size: 50, x: 0, y: 300, }).addTo(this.stage); //gradient font color const color = game.renderer.context.createLinearGradient(0, 0, game.width, 0); color.addColorStop(0, "#f47c35"); color.addColorStop(1, "#e6e650"); const strokeColor = game.renderer.context.createLinearGradient(0, 0, game.width, 0); strokeColor.addColorStop(0, "#a2e65e"); strokeColor.addColorStop(1, "#3577ca"); let test = new game.SystemText('Lorem ipsum dolor sit amet!', { font: 'SoSweetHoney', lineWidth: 2, size: 50, x: 0, y: 500, }).addTo(this.stage); test.color = color; test.strokeColor = strokeColor; } }); }); index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Panda 2 - SystemText</title> <link rel="stylesheet" href="style.css" media="all" /> <script type="text/javascript" src="src/engine/core.js"></script> <script type="text/javascript" src="src/game/config.js"></script> <script type="text/javascript" src="src/game/main.js"></script> </head> <body> </body> </html> Note that you have to include the fonts directory as well as the style.css file in your project to make the custom font work!

I think it is best to put this into a separate plugin so you can add this feature (and the extra kbs) if you need the feature. Shall I give it a go? I have already bundled a couple of other SystemText addons into a personal plugin and this feature would be a nice addition. I can publish the plugin on this forum. I really prefer SystemText over(image based) Text, it is so much more flexibel!

Nice! 😃

Hi all, I just wanted to let you know that Panda is still my primary game engine and I have no plans to abandon Panda. The absence of @enpu is unfortunate but don't forget that Panda is open source so most of the time, it is possible to fix minor issues yourself by having a look in the source code. Currently I have two large commercial projects powered by Panda and it is expected that these project will be running for at least several years. Don't forget that Panda by itself is a great engine and that it has a couple of features that not all other engines currently are supporting. Take hires support and the custom Panda GUI for example, these are just great! I will continue to read this forum on a regular basis. If there are questions that I can answer quickly, you can count on my support. Stephan

Hi, I would like to add to propose the following small update to the joystick plugin in order to make it compatible with hires scaling: var radius = this.bg.shapes[0].shape.radius / 2; must become: var radius = this.bg.shapes[0].shape.radius / 2 / game.scale; could you update this @enpu? Thanks!

Great work! 😃

quick fix for the time being: you can change the spine version in spine settings => Version =>to 3.7.x (dropdown) and it should work again.