Stephan

Members
  • Content Count

    162
  • Joined

  • Last visited

  • Days Won

    3

Everything posted by Stephan

  1. 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.
  2. You can use preUpdate() function in the player class. It is being called each cycle without having to active it manually.
  3. 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. 😊
  4. 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); }
  5. 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(); } }, });
  6. Stephan

    Essentials plugin

    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();
  7. That is great. Well done! I am happy to hear you resolved the issue. πŸ˜ƒ
  8. 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.
  9. 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
  10. 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!
  11. 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!
  12. 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
  13. 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!
  14. 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.
  15. Yep, I also see a change in the spine.json file in my own spine.json files that include skins. This should definitely be fixed soon!
  16. Hi @enpu I have a small request for the Spine plugin. In the previous version of Panda there used to be a property animationSpeed that could be used to alter the speed of the spine animation. I noticed that this prop is lacking in the current version of tne plugin. It was easy enough to add myself but since the plugin is not open source, I cannot create a pull request for you. Could you add the following code to the plugin? spine.js game.createClass('Spine', 'Container', { ... animationSpeed: 1, ... updateTransform: function() { this.state.update(game.delta * this.animationSpeed); ... } }) Thanx, Stephan
  17. Great! Glad I could help you. 😊
  18. hi, Have you set up the code in Mainscene correctly? It should look something like this: add world this.world = new game.Physics({ gravity: [0, 1], }); //add eventhandler collision this.world.on("beginContact",function(event){ if(typeof event.bodyA.collide !== 'undefined'){ event.bodyA.collide(event.bodyB); } if(typeof event.bodyB.collide !== 'undefined'){ event.bodyB.collide(event.bodyA); } });
  19. Hi @enpu, I just encountered en fixed a small bug in the p2 pulgin. Since it is not open source, I cannot create a pull request so I decided to post it here instead: p2.js line 13876: context.rect( -shape.width / 2 * body.world.ratio, -shape.height / 2 * body.world.ratio, shape.width * body.world.ratio * game.scale, shape.height * body.world.ratio * game.scale ); should be: context.rect( -shape.width / 2 * body.world.ratio * game.scale, -shape.height / 2 * body.world.ratio * game.scale, shape.width * body.world.ratio * game.scale, shape.height * body.world.ratio * game.scale ); Hope this is helpful. Stephan
  20. I just had another look at the problem and I think it is a small bug in the engine. I just posted a pull request for the develop branch to fix the problem.