Stephan

Check this example:

You could embed a webfont in your HTML page and render in as text in your game. That way you are certain the textfont is available and you can render it at every fontsize with ease.

You can use preUpdate() function in the player class. It is being called each cycle without having to active it manually.

Hi greencoder, due too the lack of support from enpu and the diminishing community, I decided to rewrite my current project to Phaser3. don’t worry, I will still respond to questions about panda in this forum that I can answer quickly. 😊

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! 😃