Search the Community

I offer a captivating suite of advergames tailored for bars, restaurants, coffee shops, donuts shops, pizzerias, and bakeries to engage your customers in a fun and interactive way. The games are seamlessly integrated with a leaderboard and utilized to promote businesses and services enhancing customer engagement with brands. No downloads required - share games via a simple link or QR code placed strategically on menus, takeaway bags, drink cups, beer labels and more. Customers can play for a chance to win enticing rewards like free meals, discounts, or promotional items. How it works Brand recognition: I will tailor the game to reflect your brand identity by incorporating your logo, color scheme, or images of your product. Rewards: I will set up a leaderboard-based rewards system. Players reaching certain scores will receive discounts or free soft drinks for their next order, encouraging game engagement and incentivizing purchases. Promotion: I will create a dedicated landing page with the email collection form which can be used to promote the game to your customers through various channels - social media, in-store displays, or as QR codes on pizza boxes. Increase sales and retain customers: Leverage the power of collected emails to follow up with customers who have earned rewards and to send newsletters featuring upcoming offers. --- Engage your customers through play with NakNick.com

Play It Now: https://cutedressup.com/game/monster-girls-high-school-squad/ #dressup #monsterhigh #girlgames #highschool #fashion #cutedressup #cutegames Unleash your inner fashionista with the Monster Girls High School Squad dress-up game! Mix and match captivating outfits, accessorize with magical charms, and create spellbinding looks for supernatural students. Dive into a world of style, friendship, and enchantment as you explore the fantastic wardrobe options and dress up the alluring characters. Join the squad and let your creativity run wild in this thrilling fashion adventure!

Play It Now: https://cutedressup.com/game/bffs-high-school-first-date-look/ #bffs #dressup #girlgames #barbie #Ellie #barbieandfriends #cutedressup #highschool #datenight

Play It Now: https://cutedressup.com/game/super-girls-my-rainy-day-outfits/ Welcome to Super Girls My Rainy Day Outfits. Who said that you can’t look perfect on a rainy day? A bit of rain shouldn’t stop us from looking fabulous! And don’t even worry about the hair, some curls under a hat look absolutely perfect! How would your perfect rainy day outfit look like? Try creating it while helping these princesses dress up in warmer clothes and rain boots. Accessorize their look with a hat, scarf, and a cute umbrella.

Play It Now: https://cutedressup.com/game/celebrity-social-media-adventure/ Welcome to the Celebrity Social Media Adventure. Celebrity girls planned to try some adventure fashion over social media. Each one tries different fashions and posts them on social media and finds who trends the most. Sounds fun! right? Help the girls by browsing their wardrobes and picking the suitable costumes in each fashion. And then pick cute accessories and hairstyles.

Play It Now: https://cutedressup.com/game/bffs-spring-break-fashionista/ Welcome to the Bffs Spring Break Fashionista. Spring break is here. Barbie and their friends are can’t wait to have some fun together. They’ve been waiting for the spring break since the beginning of the year. Help them prepare their spring break outfits! They can finally wear skirts and dresses since it’s really warm outside now, so make sure to create a cute look! Have fun!

I am making html5 game using phaser. I used phaser on the server side. The app seems to working well, but when player and disconnect and reconnect the room then it crashes error. Error: Aborting. Core Plugins missing. I don't know why it happens. I create phaser Game object on the server side several times. I want your kind help.

Hi all, Im working on a responsive game using Phaser 3 and i having issue with the text font size in some devices. Is there any way to auto size the text , so it looks the same in all mobiles devices. Any suggestions / references regarding this subject would be really useful. Thanks in advance.

Play It Now: https://cutedressup.com/game/princess-royal-wedding/ Welcome to the princess royal wedding game. Princess Anna and Elsa are getting ready for their wedding with Kristoff and Jack. They waiting so long for this occasion. They need some hand to get ready. Come and join the girls! And make this occasion the most beautiful one in their life!

I have an old school RPG I am making and I have two main scenes, the Overworld and Encounter scenens. The overworld is fine when switching to it but the problem is the Encounter, before I switch to it, I reset it so I can recreate it from scratch with a random monster in it. The problem is, every time I switch/restart the Encounter scene, the animation of the creature gets progressively faster. I do remove the animation key so I dont get the warning when I switch back to the Overworld scene. Just curious if I am taking the right approach to this and if so, do I need to clean up the sprite of the monster before hand so it doesn't make the animation speed up?

Hey All, I hope you can help me. I'm quite new to Phaser. I've looked all over google and couldn't find an answer to my question. I have an idea for a Tetris-like game. At the moment I'm learning the basics by setting up a single block to fall on the floor before another single block falls after it. The block falls from the air onto the ground just fine. The issue is: I simply want to have a collision call back happen once. I've simplified the code to make the question easier to read: function create () { this.physics.add.collider(block, ground, hitFloor, null, this); } function hitFloor () { console.log('floor hit'); } The block hits the floor and the callBack runs infinitely which makes sense because the block doesn't move and stays on the floor. I was considering setting a flag with a variable like `floorHit`. Something like: function hitFloor() { if (!floorHit) { console.log('do something') floorHit = true } } But I want to have multiple blocks fall and this won't work because the new block that gets created needs to have the `floorHit` variable set to false before it starts falling. What am I missing? Any help would be much appreciated. Thanks MHC

// Flash player red let tintTween = this.tweens.add({ targets: this.player, duration: 200, tint: 0xff0000, callbackScope: this, onComplete: function(tween, sprites) { // Return to original color this.player.clearTint(); } }); This code is making my player sprite flash black and go back to normal, why is it not flashing red?

Hello there. I would like to present me new mobile arcade game city blaster. It is a fun and good looking mobile game. It is very easy to play, just tap the screen to defend your city and citizens. You can download it for free and without adds on the link below. Please tell me what you think. Good luck!https://retrodries.itch.io/city-blaster

I am making UI Components Framework for Phaser 3, that is driven by JSFL-generated jsons and atlases. It means that you can build your UI in Abode Animate, export it with given script, and forget about manual code positioning and building stuff! Please, try it out. https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html Docs, examples, tutorials: https://xense.github.io/phaser-ui-comps-docs There are two basic things in this framework. First is ComponentClip, which is a view instance, it is recursively self-build by provided json and atlases. Second is UIComponentPrototype, which is clip controller. It can be easily extended to create any components, windows or whatever you need. Essential meaninig of it is that it doesn't need a clip to exist always. For example, you can change states of a root clip, and child clip can get new clip instances, ore lose them, and nothing bad happen. Some base components are already included UIButton has 4 states, "up", "over", "down", "disable" UIButtonSelect same as button, but behaves like checkbox, has 8 states, by adding "_select" suffix to UIButton's states when selected. UIButtonRadio Selectable buttons, that can be grouped to select only one of them. UIButtonDraggable same as UIButton, but also emits drag event, drag bounds can be self externally. UIScrollBar vertical or horisontal bar with draggable thumb and prev/next buttons. UIProgressBar Setup only start and end elements positions, scale, rotation or alpha, and this component will interpolate them according to provided progress value. UIScrollPanel Helper for scrolling any element with UIScrollBar. UIContainer Base container component to add other dynamically created components inside. Can be easily extended to create any types of lists, for example. I'm still working on new components and extending existing functionality. Tell me, would you use it, what other components you may need, and whatever you think about it. Any feedback is appreciated! Also I'll be thankful for any collaboration. Available at GitHub and npm

Hi, Does anyone know if a single frame in an animated sprite can be used as a trigger to change scene (Phaser 3)? I have an interface with about 30 images set in an animation loop and would like to be able to click on a particular image to change the scene. The result I would like resembles a JavaScript switch statement. Thanks

Hi All, I'm new to phaser (using phaser 3.50.1) and trying to generate random objects around the level. The problem is I don't want these objects to be spawned over on the tilemapLayer tiles. Attached is an image of the stars spawning over the tiles. Before I added the tileMap, I was using this.physics.add.staticGroup(); with that I was able to check on the overlap with the walls in my method to add stars. this.scene.physics.overlap(walls, star) Now, with the tileset, I'm passing the tileMapLayer, but overlap is not detecting the tiles (picture, line 29) How is the correct way to check for collisions/overlaps for tileMaps ?

Hey guys, I'm pretty new to the Phaser 3 framework and I followed a tutorial about making a phaser 3 game. Now, I wanted to load my tilemap into my game. But the browser console gives me this error : Uncaught TypeError: Cannot read property 'TILED_JSON' of undefined preload() { this.load.spritesheet( "charactYellowR", "https://cdn.glitch.com/7d2d6955-7277-4e96-807c-25649d73ba29%2FYellowWalkL.png?v=1603766562142", { frameWidth: 17, frameHeight: 25 } ); this.load.tilemap( "map", "https://cdn.glitch.com/7d2d6955-7277-4e96-807c-25649d73ba29%2FspaceBG.json?v=1603882479054", null, Phaser.Tilemap.TILED_JSON ); this.load.spritesheet( "tileset", "https://cdn.glitch.com/7d2d6955-7277-4e96-807c-25649d73ba29%2FspaceBg.jpg?v=1603882472713", 16, 16 ); } Please respond to my question... Thanks in advance!

CODE var GameScene1 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene1 () { Phaser.Scene.call(this, { key: 'GameScene1' }); }, preload: function () { this.load.spritesheet('Girl', 'Girl.png', {frameWidth: 256, frameHeight:256, endFrame: 12}); this.load.spritesheet('Boy', 'Boy.png', {frameWidth: 64, frameHeight:64, endFrame: 36}); this.load.image('Particle', 'Particle.png'); this.load.image('Ground1', 'Ground1.png'); this.load.image('Ground2', 'Ground2.jpg'); this.load.image('Ground3', 'Ground3.jpg'); this.load.image('PortalL', 'PortalL.png'); this.load.image('PortalR', 'PortalR.png'); this.load.image('Anthima', 'Anthima.png'); this.load.image('Yashit', 'Yashit.png'); this.load.image('Door', 'Door.png'); this.load.image('Win', 'Win.png'); }, create: function () { ground = this.add.sprite(300, 200, 'Ground1'); ground.setScale(1.5); ground = this.add.sprite(300, 680, 'Ground1'); ground.setScale(1.5); cursors = this.input.keyboard.createCursorKeys(); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('Boy', { start: 8, end: 15 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('Boy', { start: 24, end: 31 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'down', frames: this.anims.generateFrameNumbers('Boy', { start: 0, end: 7 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'up', frames: this.anims.generateFrameNumbers('Boy', { start: 16, end: 23 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'pause', frames: this.anims.generateFrameNumbers('Boy', { start: 16, end: 16 }), frameRate: 10, repeat: -1 }); Boy = this.add.sprite(200, 300, 'Boy'); door = this.add.sprite(710, 510, 'Door'); door.setScale(0.5); Boy.setScale(1.5); }, update: function(){ if (cursors.right.isDown) { if (Boy.x !=790) { Boy.anims.play('left', true); Boy.x += 2; } } else if (cursors.left.isDown) { if (Boy.x !=20) { Boy.anims.play('right', true); Boy.x -= 2; } } else if (cursors.up.isDown) { if (Boy.y !=30) { Boy.anims.play('down', true); Boy.y -= 2; } } else if (cursors.down.isDown) { if (Boy.y !=570) { Boy.anims.play('up', true); Boy.y += 2; } } else if (Boy.y >= 450 && Boy.x >= 680) { door.setInteractive({ useHandCursor: true }); door.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene2'); this.scene.scene.pause('GameScene1'); }); } else { Boy.anims.play('pause', true); } } }); //create a scene with class var GameScene2 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene2' }); }, create: function () { ground1 = this.add.sprite(400, 300, 'Ground2'); ground1.setScale(1, 1.2); cursors = this.input.keyboard.createCursorKeys(); this.anims.create({ key: 'rightG', frames: this.anims.generateFrameNumbers('Girl', { start: 0, end: 5 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'leftG', frames: this.anims.generateFrameNumbers('Girl', { start: 6, end: 10 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'pauseG', frames: this.anims.generateFrameNumbers('Girl', { start: 4, end: 4 }), frameRate: 10, repeat: -1 }); portalL = this.add.sprite(50, 420, 'PortalL'); portalL.setScale(0.1); portalR = this.add.sprite(750, 420, 'PortalR'); portalR.setScale(0.1); Girl = this.add.sprite(300, 440, 'Girl'); Girl.setScale(0.5); }, update: function(){ if (cursors.right.isDown) { if (Girl.x != 710) { Girl.anims.play('rightG', true); Girl.x += 2; } } else if (cursors.left.isDown) { if (Girl.x != 80) { Girl.anims.play('leftG', true); Girl.x -= 2; } } else if (Girl.x <= 100) { portalL.setInteractive({ useHandCursor: true }); portalL.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene3'); this.scene.scene.pause('GameScene2'); }); } else if (Girl.x >= 680) { portalR.setInteractive({ useHandCursor: true }); portalR.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene2'); }); } else { Girl.anims.play('pauseG', true); } } }); var GameScene3 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene3' }); }, create: function () { ground2 = this.add.sprite(400, 320, 'Ground3'); ground2.setScale(0.2); var txt5 = this.add.image(400, 100, 'Win'); txt5.setInteractive({ useHandCursor: true }); txt5.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); this.scene.scene.pause('GameScene3'); }); var particles = this.add.particles('Particle'); var emitter = particles.createEmitter({ speed: 100, scale: { start: 0.05, end: 0 }, blendMode: 'ADD' }); var particles2 = this.add.particles('Particle'); var emitter2 = particles2.createEmitter({ speed: 100, scale: { start: 0.05, end: 0 }, blendMode: 'ADD' }); logo1 = this.physics.add.image(100, 100, 'Yashit'); logo1.setScale(0.3); logo1.setVelocity(100, 0); logo1.setBounce(1, 1); logo1.setGravityY(300); logo1.setCollideWorldBounds(true); emitter.startFollow(logo1, -60, 30); logo2 = this.physics.add.image(500, 200, 'Anthima'); logo2.setScale(0.3); logo2.setVelocity(100, 0); logo2.setBounce(1, 1); logo2.setGravityY(300); logo2.setCollideWorldBounds(true); emitter2.startFollow(logo2, 80, 10); } }); //settings required to configure the game var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: 10, } }, //set background color backgroundColor: 0x8080, scale: { //we place it in the middle of the page. autoCenter: Phaser.Scale.CENTER_BOTH }, scene:[GameScene1, GameScene2, GameScene3] }; var game = new Phaser.Game(config); What we are trying to do: –In Phaser we have scene changing functions to help us navigate through our game. –We are making 3 scenes in total. In 1st scene we have to reach a door to navigate to the second scene, the 2nd scene has a completely different Art type and not one but two portals which player should figure out which is the correct door to win the game. –3rd scene is radically different from other two scenes as it has physics components and particle effects, it is a Game win scene in a way. Elements in this scene –Backdrop Image of grass, Door added as sprite and Character added as sprite and animated. Boy = this.add.sprite(200, 300, 'Boy'); door = this.add.sprite(710, 510, 'Door'); ground = this.add.sprite(300, 200, 'Ground1’); –Boy is animated which we will see further in slide along with how we are changing scenes. Elements in this scene –Girl as a sprite, Backdrop picture as a sprite and two portals with same sprite. –Girl is animated which we will see further in slide along with how we are changing scenes. portalL = this.add.sprite(50, 420, 'PortalL'); portalR = this.add.sprite(750, 420, 'PortalR'); Girl = this.add.sprite(300, 440, 'Girl'); ground1 = this.add.sprite(400, 300, 'Ground2’); Physics in this scene –Code snippet for Particle effect var emitter = particles.createEmitter({ speed: 100, scale: { start: 0.05, end: 0 }, blendMode: 'ADD' }); –Code snippet for Bounce, gravity, setBounds and velocity logo1.setVelocity(100, 0); logo1.setBounce(1, 1); logo1.setGravityY(300); logo1.setCollideWorldBounds(true); Animation this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('Boy', { start: 8, end: 15 }), frameRate: 10, repeat: -1 }); –This is an animation clip we have similar clips for left, up and down animation which we can see in the Rar file attached with work. –This snippet sets speed of animation with frameRate and which frames are included in clip with frames. –Usage, we use this snippet to activate the respective clip. if (cursors.left.isDown) { if (Boy.x !=20) { Boy.anims.play('right', true); Boy.x -= 2; } } Scene Change if (Boy.y >= 450 && Boy.x >= 680) { door.setInteractive({ useHandCursor: true }); door.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene2'); this.scene.scene.pause('GameScene1'); }); } This snippet takes us to Scene 2 from Scene 1.

The Script is being made for Animation of the Sprite Sheet with its movement. Using this script you can do this task. The Explanation of the script is given for everything you this you can understand this easily. Their is a " Docs file " attached with it. explanation of Script is given in it with attached image. var config = { type: Phaser.AUTO, width: 800, height: 600, gravity: { x: 0, y: 0, debug: false, }, parent: 'phaser-example', physics: { default: 'arcade' }, backgroundColor: 0x27ae60, scene: { preload: preload, create: create, update: update } }; var mummy; var cursors; var game= new Phaser.Game(config); function preload () { this.load.spritesheet('mummy', 'assets/running.png', {frameWidth: 125, frameHeight:150, endFrame: 10}); } function create () { cursors = this.input.keyboard.createCursorKeys(); this.anims.create( { key: 'left', frames: this.anims.generateFrameNumbers('mummy', { start: 0, end: 20 }), frameRate: 15, repeat: -1 }); mummy = this.add.sprite(200, 200, 'mummy'); mummy.anims.play('left', true); } function update () { if (cursors.right.isDown) { if (mummy.x !=700) { mummy.x += 0.5; } } } Animation and SpriteSheet Movement.docx

Hello, I'm using Phaser 3 and the physics engine matter. I need to call a function when one object collides with a particular object. For example I have a tank, barrels, hearts. Then there will be bullets, other tanks, some other objects. You need to call the function when the tank collides with the barrel, it should explode, and if it collides with the heart, it will replenish life. this.matter.world.on('collisionstart', function (event) { bangBarrel(); }); this method calls the function in any collision. How to trigger the function when the tank collide with the barrel, and how to trigger the function when the tank collide with the heart?

Is it possible to reference the object I just created inside the arrow function to set the tint? I've tried using this but that just references the Scene.

Hi there, I'm working on musical educational App (Phaser 3) where audio samples (notes) must be plaeyd in sequential mode. But when I leave page (game is running yet) and back in a few seconds I listen to all sounds simultaneously. It looks like they were accumulated in WebAudio buffer(?). I could stop playback if I know how to detect that my App (or Apps page) is active (in focus). Porobably its very simple thing, but I didn't find an answere, so I would be gratiful for any advice. video

I wanted to know if it's possible to load an animated sprite in preload() and use it in preload(). Essentially I am trying to get an animal to run across the screen to mark the progression of loading. I have a simple graphic rectangle setup as a basic loading bar right now. If I try to update the position of the sprite with this.dog.x it throws an error that x is not a property.

Just finished a math practice quest game for kids in Phaser 3. Any feedback would be handy, especially bugfinding! here's the link: https://play.google.com/apps/testing/com.mathquest.pp cheers, pp

I am new to integrating tiled into phaser. Watched a bunch of tutorials and read a lot and followed instructions but my project just doesn't work the way it should... In Tiled, I added a Boolean property to each tile for collides: true. In phaser set it to setCollisionByProperty and.... no collision happens. I added debugging code, shows that there are tiles to collide with, my submarine is debugged and is showing a body, I have put my layer and sub on the same layer... still no collision. I've updated to the most recent versions of both Phaser 3 and Tiled... still no love. My sub should not cross into the islands area. My sub starts at my starting point placed in the objects layer, so I got that going for me. Any help would be greatly appreciated as this issue is destroying my productivity on this project. MapExplore.js