All Activity

This stream auto-updates     

  1. Past hour
  2. I tested it again and now there is no error. Regards.
  3. Today
  4. 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: 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!
  5. (Disclaimer: I have posted a similar post on the new Phaser 3 forum, but as I crucially need feedback I'm spreading it around) I'm presenting Westward, a collaborative MMORPG where the players have organize themselves to settle a continent, continuously expanding westward in order to grow and conquering an hostile civilization in the process. The game can be played here and you can check this page for more information. I’m also writing regular dev log. There are one or two screenshots at the end of this post to give you an idea of the style. The first basic version of the game is finished and working, but this is still very much work in progress as the gameplay and the visuals are still basic and a far cry from what I have in mind, and surely there are some bugs left. However, it is advanced enough to be shown around and at this stage I crucially need feedback to steer the development in the right direction. Therefore, I invite you to as much as possible point out bugs, indicate what is not fun or annoying, what you think could be improved, but also what you like, if anything. Below the game canvas are a few social links (Slack & Discord) if you want to follow the development, support me and/or give feedback. These channels are still a bit empty, feel free to make that change. Development has been going on in my free time for more than 2 years and started with Phaser 2 but moved to Phaser 3 as soon as it was released and has grown with it.
  6. Great games. For a primary school child will be very helpful.
  7. 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!
  8. It is out-of-the-box Whats the problem? I just didnt understand what you want to do and assumed we have problem with scaling > Ah, thanks Ivan!! I love the "Wait for you to solve it" solution I write it to encourage people to solve everything themselves. Its a bitter option.
  9. Ah, thanks Ivan!! I love the "Wait for you to solve it" solution So, is a demo like this not currently possible in Pixi v5 out-of-the-box?
  10. Female Concept art design If interested don't PM, send your requests or hellos to Skype: deathstalkerarts
  11. Now its broken again, I believe facebook changed somethings drastically. @enpu ...
  12. Hey Guys try my new game please Mr TONI
  13. @Dilantha Why did you split it? Now everything is harder Its very hard to split or join geometries, calculate intersections and unions, pixi does not have boolean 2D shape library inside. Basically, if you have two sprites you want to mask - put them into mask and mask the container. Alternatively, generate a texture from them (renderer.generateTexture) and use `Graphics.beginTextureFill` with that texture. Yes, the problem can be solved on newbie level, but it will take effort. Sometimes people ask first question that is solvable only if you already know big parts of PixiJS sources, but that's not the case. You can do it, but its not a cake walk for newbie.
  14. Hi, the editor does not provide built-in support for code obfuscation or any other "build" tool.
  15. I dont actually remember whether scale is in normalized coords or pixel coords. There are two ways we can solve that: 1. You wait for me to solve it 2. You learn about filter coordinate spaces, and why DisplacementFilter needs extra sprite and not just a texture. There's also the matter of "pixi-picture" plugin, i still didnt port it to v5, but it basically gives you ability to apply filter to background! DisplacementFilter is one of strongest selling points, we have to make it better!
  16. @Stephan @Wolfsbane Thank for comment😀😀😀 About is it better as a module?....... ask him is better 😀 @enpu
  17. Hi Everyone! I have a general question about displacement maps in v5. I've noticed that when the displacementSprite is added to the container, the effect scales to the entire container size, rather than just being constrained to the size of the sprite. Just checking whether is the the actual current behaviour or if I might be implementing it incorrectly? I did notice this post on using bounds to constraining the size of the effect, which works, but it also masks the rest of the sprites in the container: Cheers!
  18. PixiJS team doesnt have consensus on how to resize stuff - we prefer user to know this stuff. We have support of resolution (dpi), autoDensity property that sets css dimensions according to resize, and we have You can also scale inside stage itself, or scale UI and game field separately. There's no unified super-resizing component for application. There's also a stupid css+html+fixed_canvas_size way , like here: , i'm using css flex. So far, no one in community made a resize component that is worth putting into pixi. In that case we prefer to not teach users our bad habits and figure out solutions optimized for their game. If you want to be the hero who finally ports Phaser ScaleManager as a pixi plugin - go for it
  19. Hi, How to scale sprite proportionally according to the screen resolution, is there any in-build functions in PIXI. In Phaser, we can easily do this.
  20. Wizard Character - Avatar Creation [tested in engine] Game & Animation Studio Follow us: [ AAA - indie price - zagreus zagreusent ze studio character concept high / low poly character & creature game prop weapon game rig and loop gaming animation production company studio india asia ]
  21. Okay, But if you wanna deal with phaser content you have to go with that option only I feel.
  22. Yesterday
  23. That's very cool! 👍👍 Also, code looks good to me. Wondering if it should be added into the engine itself, or maybe better as a module?
  24. Hello friends, I am new to the forum, I would like you to help me solve a slightly urgent problem, I am putting together a game with Phaser, I try to collide one image with another, until there is easy, the problem arises because one of the bodies has an animation with a tween, and when making a collision with another body, don't do it, keep going down, has someone happened to you ?, I show you the code var config = { type: Phaser.AUTO, width: 1200, height: 675, parent: 'Fondo', transparent: true, pixelArt: true, physics: { default: 'arcade', arcade: { gravity: { y: 1000 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var cursors; var cofreup; var stars; var fondo; var platforms; var plataforma2; var colup; var suelo; var move = 0; var game = new Phaser.Game(config); function preload() { this.load.image('star', '../juego4/img/star.png'); this.load.image('fondo1', '../juego4/img/bg.png'); this.load.image('colision', '../juego4/img/plataformas/colision.png'); this.load.image('colision2', '../juego4/img/plataformas/colision.png'); this.load.image('plataforma1', '../juego4/img/plataformas/img-07.png'); this.load.image('plataforma2', '../juego4/img/plataformas/img-08.png'); this.load.image('cofre1', '../juego4//img/plataformas/img-15.png'); this.load.image('baul', '../juego4/img/plataformas/img-16.png'); this.load.image('ground', '../juego4/img/platform.png'); this.load.spritesheet('dude', '../juego4/img/dude.png', { frameWidth: 64, frameHeight: 98 }); } function create() { suelo = this.physics.add.staticGroup(); suelo.create(1, 690, 'ground').setScale(100, 1).refreshBody(); //colisiones// col = this.physics.add.staticGroup(); //*baul col.create(500, 570, 'colision').setScale(12, 2).refreshBody(); //*plataformas col.create(80, 170, 'colision').setScale(15, 2).refreshBody(); col.create(610, 370, 'colision').setScale(25, 2).refreshBody(); col.create(650, 150, 'colision').setScale(25, 2).refreshBody(); col.create(80, 476, 'colision').setScale(12, 2).refreshBody(); col.create(350, 280, 'colision').setScale(12, 2).refreshBody(); col.create(1100, 180, 'colision').setScale(12, 2).refreshBody(); col.create(980, 475, 'colision').setScale(12, 2).refreshBody(); //*cofres btn = this.physics.add.staticGroup(); btn.create(800, 570, 'colision').setScale(12, 2).refreshBody(); //*plataformas //Colisiones movieminto// //baul cofre = this.physics.add.staticGroup(); cofre.create(500, 610, 'baul'); //Plataformas grandes platforms = this.physics.add.staticGroup(); platforms.create(600, 400, 'plataforma1'); platforms.create(50, 200, 'plataforma1'); platforms.create(650, 180, 'plataforma1'); //Plataformas pequeñas platforms2 = this.physics.add.staticGroup(); platforms2.create(80, 500, 'plataforma2'); platforms2.create(350, 300, 'plataforma2'); platforms2.create(1100, 200, 'plataforma2'); platforms2.create(980, 500, 'plataforma2'); //Imagen cofres // cofreup = this.add.image(250, 500, 'cofre1'); this.tweens.add({ targets: cofreup, y: 100, paused: false, physics: true, collider: true, duration: 5000, ease: 'Sine.easeInOut', yoyo: true }); //Muñecos player = this.physics.add.sprite(100, 10, 'dude'); player.setBounce(0.1); player.setCollideWorldBounds(true); //Animacion personaje this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [{ key: 'dude', frame: 4 }], frameRate: 12 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 6, end: 8 }), frameRate: 10, repeat: -1 }); cursors = this.input.keyboard.createCursorKeys(); stars ={ key: 'star', repeat: 11, setXY: { x: 12, y: 0, stepX: 70 } }); stars.children.iterate(function (child) { child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); }); this.physics.add.collider(player, col); this.physics.add.collider(player, suelo); this.physics.add.collider(suelo, cofreup); this.physics.add.collider(stars, suelo); this.physics.add.collider(player, cofreup); this.physics.add.collider(stars, platforms); this.physics.add.overlap(player, stars, collectStar, null, this); this.physics.add.overlap(player, btn, call, null, this); } function update() { if (cursors.left.isDown) { player.setVelocityX(-160);'left', true); } else if (cursors.right.isDown) { player.setVelocityX(160);'right', true); } else { player.setVelocityX(0);'turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-500);'up', true); } //Animacion Cofre // cofreup.x = 220 + Math.cos(move) * 1; // cofreup.y = 460 + Math.sin(move) * 100; // move += 0.03; } function collectStar(player, star) { star.disableBody(true, true); } function call (player, btn) { Tween.stop(); }
  25. Hi guys! Let me know the publishers that you recommend working with based on a exclusive license fee. Thanks!
  1. Load more activity