Feel free to hit me with suggestions.

https://github.com/Sun0fABeach/sveltekit-phaser

Cheers

In this example, we are going to access an audio file from index.html and play it with a .js file. For this, declare the head and body tag as usual in the index.html

< head >
< title > Example < /title >
< meta charset = "UTF - 8" >
< script src = "example.js" > < /script >
< script src = "phaser.js" > < /script >
</ head >
< body > 
< /body >

Include the media file in the body tag

< audio id="id" src="file_name.mp3" >< /audio > //For .mp3, .wav file
< video id = "id" src = "video_name.video_type" >< /video > //For .mp4, .wmv file

With this, the html part is done. Open the javascript file and create the scene according to your specifications. For this example, we have taken the below config.

var config = {
    type: Phaser.AUTO,
    width: 850,                       //scene width
    height: 650,                      //scene height
    backgroundColor: '#4c0099',       //scene bg color
    parent: 'phaser-example',          //the declaring class has 'phaser-example' as the parent
    scene: {                          
        preload: preload,              //functions declared
        create: create
    }
};
var game = new Phaser.Game(config);

The above snippet has created the scene. Now, we are going to have a text saying 'Click Here', which upon clicking will play the media file - in this case the audio file

function preload ()                          //defining the preload function
{
}

function create ()                          //defining the create function
{
    var txt; //txt is a variable which is storing a textbox

    txt = this.add.text(400,300,'Click Here');   
    //txt displays 'Click Here' in coordinates (400,300) of the game scene

    txt.setInteractive({useHandCursor : true}); 
    //the cursor turns into a clickable hand cursor when hovering over the 'Click Here' text

    txt.setInteractive().on('pointerdown', function(){            //upon clicking the text, you are declaring and calling a function
        var audi = document.getElementById("aud");                
        //this gets the element from the html file with id = "aud" and stores it in variable 'audi'
        audi.play();  
        //to play the audio file. This can also be used for a video file                                          
    }) }

The final output will have a purple game scene with 'Click Here' on the center of the scene. 'Click Here' will play the audio file declared in index.html

In case of an image, you can declare the following under create function

   var txt = this.add.text(400,300,'Click Here'); 
        txt.setInteractive({useHandCursor : true});
        txt.setInteractive().on('pointerdown', function(){
            var image = this.add.image(100,100,"filename.png")            //this adds the image at the time of clicking the text
        })

i need a game developer to fix RTP on pragmatic games 

i try solid in emitters. How i can listen events across event emitters? Code from bellow in scene, but playerEventSystem isnt on a addPlayer event. code in addPlayer function works if him in MapEventSystem

thx

This is my source code you can download it then extract:

https://www.webintoapp.com/store/80433 

https://bitbucket.org/bkirvin/quasar-phaser/src/master/

This setup builds a simple paddle ball game you can preview here

https://phasar.eepods.com

Enjoy!

These days I found myself starting my new project with Phaser and I was looking for a template that included both Typescript and Electron, but around the net there was nothing that fully satisfied me.

So I thought of creating a starter that would allow me to have both the ability to build the project on the web browser and in desktop app format with Electron.

And so, today, I present my starter template: https://github.com/waliente/phaser-typescript-electron

I hope it will be useful to you too

The closest I have come to a working timer is this post. I have tried implementing it on my end but sadly, the timer does not seem to work.

I would appreciate any leads on how to do this in an object oriented manner.

Regards,

I experiment with modifying the CORS Policy using Laravel's middleware. Additionally updating the headers file in Nginx and Apache.

Welcome to My Sweet Lolita Dress. LOL Surprise girls plan to try their sweet lolita fashion. Lolita fashion is a cute stylish way to dress up in puffy skirts, lacy blouses, and accessories, perfect to create your own colorful trendy fashion. Mix classical, sweet, and gothic lolita styles for a unique spin on the Japanese trend. Browse and find cute outfits for our girls. Join as a fashion expert and show your skill.

Welcome to Ellie And Ben Insta Fashion. Help Ellie and her boyfriend Ben to choose an outstanding outfit to show their fashion skill on Instagram. Browse their wardrobe and pick costumes based on their moods. You can make their looks better with the help of other accessories. Join and play with your favorite couples. Have fun!

What is velocity in phaser if it isn't how far the sprite moves in a single frame like it is in most engines I've worked with?

Let's say for example I have a game website with some embedded games from Miniclip.com or some other website along with a few we games of my own. Am I allowed to monetize this website with Google adsense?

thanks in advance.

I want to load an image using ( uri,url ). Is this possible?

activeQuests={

"quest1": "this is what you do in the first quest",

"quest2": "this is what you do in the second quest"

}

In my menu scene, I use the following code:

gameState10.activeQuestDisplay = this.add.text(175, 140, '', {
      fontSize: '25px',
      fill: '#fff',
      wordWrap: {
        width: 850,
        useAdvancedWrap: true
      }
    }).setOrigin(0, 0);
    let textFiller='';
    for (questTitle of Object.keys(activeQuests)) {
      textFiller += `${questTitle}: ${activeQuests[questTitle]}\n\n`
    };
    gameState10.activeQuestDisplay.setText(`${textFiller}`);

However, the two new lines (which should be present from \n\n) do not appear. Is this an issue with wordWrap? I've looked for quite awhile and can not seem to find a solution.

I configured my game for DOM Elements, and the div container that's getting placed is under my canvas, instead of on top of the canvas, only on Chromium based browsers, on Firefox the div is set on top correctly.

Example: (Chromium):

Firefox:

I found on Chromium - Linux, I can target the overlap with the following selector, but is there a better way to go about this?

body > div:nth-child(12) {
  position: absolute;
  top: 0;
  left: 0;
}

This is my game config:

this.config = {
  type: Phaser.AUTO,
  dom: {
    createContainer: true,
    behindCanvas: true
  },
  scale: {
    mode: Phaser.Scale.FIT,
  },
  height: 940,
  width: 1840,
  scene: [ StartScene,
           IdentificationScene,
           MainScene,
           FinalScene ],
  parent: "gameContainer",
};

Has anyone seen this behavior before?  I'm using Angular 12 with the framework. Is there a better selector that won't require a child selector?

Thanks

Sizer

Layout children game objects.

Links

• Document
• Sample code

Live demo

• Nested sizer : Create a list by two level sizers.

Label

A container with a icon, text, and background.

Links

• Document
• Sample code

Textbox

A container with a icon, (typing and paging) text, and background.

Links

• Document
• Sample code

Live demo

• Textbox

Dialog

A container with a title, content, buttons and background.

Links

• Document
• Sample code

Live demo

• Yes/No dialog
• Single choice dialog
• Pop-up dialog

Grid table

A container with a grid table, slider, and scroller.

Links

• Document
• Sample code

Live demo

• Grid table

Tabs

A container with 4 groups of buttons around a center panel.

Links

• Document
• Sample code

Live demo

• Tabs-table

I have circular matter bodies with the texture of a ball. How do I put text on top of these balls while keeping the body round?

I've looked into containers, but it only seems possible to have them in rectangular shape.

I'm thinking whether generating my own sprites with the text already embedded there would be the best option. It's not that straightforward as the text/numbers/symbols I'll be presenting there will be fed by an API, so I can't generate the sprites beforehand.

import Game1 from "phaser/src/core/Game";
import { Game } from "phaser";
console.log(Game1, Game);
const app = new Game1(gameSettings);

But when I tried to check the output of the console, it gives the same instance

but when I tried to make use the one from the phaser js directly, no error found
 

import { Game } from "phaser";
const app = new Game(gameSettings);

Thanks in advance for answers which part I do wrong.

When the mouse is over a bubble I'm adding a tween to highlight it (and then another tween when the pointer goes out to remove that highlight). I'm using the events GAMEOBJECT_OVER and GAMEOBJECT_OUT to add those tweens.

Everything works fine except one thing: when, for instance, I have the pointer over bubble 1 in the image below and then move the pointer down directly to the windows bar, and then move back the pointer again to bubble 1, the GAMEOBJECT_OVER event is not fired. On the other hand, if I move the pointer down from bubble 1 to the windows bar, and then to the left always through the bar, and then back up to bubble 2, the GAMEOBJECT_OVER event is fired for bubble 2. I've also checked and the GAME_OUT and GAME_OVER events are correctly fired when the pointer leaves and enters the game canvas, respectively.

Note: the game canvas extends below the screen, so there's an overflow that's not visible. This is by design and I'm not sure if that's what's causing this.

Is this a bug?

Full list of events here for reference https://newdocs.phaser.io/docs/3.54.0/Phaser.Input.Events

    const game = new Phaser.Game({
      type: Phaser.WEBGL,
      //backgroundColor: 0x000000,
      pixelArt: false,
      transparent: true,
      scale: {
          mode: Phaser.Scale.FIT,
          parent: 'engine',
          autoCenter: Phaser.Scale.CENTER_BOTH,
          width: 1200,
          height: 800
      },
      physics: {
          default: 'matter',
          matter: {
              gravity: {
                  y: -1
              },
              debug: true
          }
      },
      scene: {
        preload: this.preload,
        create: this.create,
        update: this.update
      }
    });

But I'm having trouble interacting with it from React app. I initialize a websocket connection in useEffect() and want to add a body to my game every time that websocket connection receives data. I've looked into EventEmitter, but the documentation/examples on EventEmitters don't illustrate any case where the events are being sent from 'outside' Phaser.

From what I understand, there is a "master" EventEmitter which I get from the game object and another EventEmitter connected to the scene. What's the appropriate way to access the EventEmitter connected to my scene using the game object I receive from `new Phaser.Game()`?