All Activity

This stream auto-updates     

  1. Past hour
  2. Today
  3. About how to calling angular functions within a phaser scene, you should be able to do that if you save the context before to initialize the game. Check a little example with IonPhaser WebComponent: import { Component } from '@angular/core' import * as Phaser from 'phaser' import { ApiService } from '../services'; @Component({ selector: 'my-component', templateUrl: './my-component.html' }) export class MyComponent { game: Phaser.Game initialize = false constructor( private readonly api: ApiService ){} initializeGame() { const self = this self.initialize = true self.game = { width: "100%", height: "100%", type: Phaser.AUTO, scene: { create() { this.helloWorld = this.add.text(0, 0, 'Hello World') } update () { this.helloWorld.angle += 1; } saveGame() { const { angle } = this.helloWorld self.api.saveAngle(angle) } } } } } For any other question, please check the repository of the project: https://github.com/proyecto26/ion-phaser/issues/15 Kind regards, Juan
  4. Yesterday
  5. Also, app.renderer.extract.canvas(app.stage) is BAD idea. Answer is here: https://github.com/pixijs/pixi.js/issues/6498#issuecomment-604397290 . I referenced it here: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#extract in pixijs wiki so no one can say that its missing from docs. Wiki is docs too.
  6. Hello, and welcome to the forums! According to guys from https://beatflyer.com/ , there's no chance to do it in mobiles and they do it through mediastream and not blobs
  7. Hi, So i've got this code working which captures animations that is going on in the canvas and returns DataURL of each frame.It works fine, but sometime it misses frames and give less FPS when my browser have lots of tabs open or on mobile devices. Basically my goal is to capture this animations JPEG, merge those and create mp4 video of it using FFMPEG.js Just wondering if anyone have a better approach of doing it. async function collectFrames(app, time) { let blobs = []; let ticker; let stopBlobPushing = false; let promise = new Promise((resolve, reject) => { setTimeout(() => { stopBlobPushing = true; app.ticker.remove(ticker) resolve(blobs); }, time); ticker = (delta) => { if (!stopBlobPushing) { app.renderer.extract.canvas(app.stage).toBlob((b) => { var reader = new FileReader(); reader.readAsDataURL(b); reader.onloadend = () => { var base64data = reader.result; blobs.push(base64data); } }); } } app.ticker.add(ticker); }); let result = await promise; // console.log(result); return result; }
  8. > I know the "_" designates private variables It means its kinda private but languages both js and ts dont have proper modifiers for them. For example, if I want to add a field in Sprite but users might use it too - I add "_" so sudden pixijs version update wont break their code. Its just a warning "do not touch unless you saw whats its doing in source code".
  9. Hi all, I discovered melonJS yesterday and have been tinkering around with it over the weekend; I found it generally very easy to get up and running and very fun to play with. However, I have what I think is probably a very beginner problem with collisions. I have a simple 2d map on which a bunch of sprites are moving around randomly. Usually when they collide, they correctly bounce off each other and go on their separate ways. Sometimes though they will seem to stick together, and then go flying off together in a totally random direction, at a velocity that exceeds the maximum set velocity. I have been trying to debug this for hours but can't figure out what is going on - it looks like the objects collide (I think mostly from a corner, instead of the sides) and then overlap too much, forcing them to get stuck in a way that makes the overlaps confused - so they can't figure out which way to go. I have tried limiting their velocity in the main update loop but this doesn't seem to affect them. It's based just off the boilerplate project in Github, so it's using an older version of the melonJS library - I tried updating to the latest v7 and it still does the same thing. I have the project online at https://trog.qgl.org/up/2003/boiler/ ; the relevant entities file is at: https://trog.qgl.org/up/2003/boiler/js/entities/entities.js . Any help appreciated; I have been tearing my hair out for hours on this. Thanks,
  10. I fully appreciate your help! And I did go through the source code (I have pixi.js always open and go through classes all the time now). It's just hard to understand when you're pretty new and have no one around to ask but online! It is often easier for me to get an intuitive sense for the code and then go in and figure out the details for confirmation. For instance, reading through what you linked, I have questions on the _variableName. I know the "_" designates private variables, but how this all works and their correct usage is still pretty confusing to me (what makes something private? is it just when it can't be accessed without a get function? are there are areas that are correct usage for it?) Also, this syntax: for (let i = 0, len = items.length; i < len; i++) { items[i][name](a0, a1, a2, a3, a4, a5, a6, a7); } We have an array within an array, but how does the whole (x,y,z, ....) work? I have to look that up... This is why it is tough for someone new, I have a single question that I want an answer to, but in order to get the answer for that question I may have to study several other things for a few hours which would be a distraction (although needed eventually).
  11. Last week
  12. I'm trying to build an '90s style rpg game, think dragon warrior series, where it will have a UI box at the bottom of the screen where the user makes a choice like attack, move, eat etc I'm thinking of having a game controller (phaser scene?) which updates a board scene and a UI box scene and displays other scenes if necessary I am thinking of passing in to the UI box an object with message, an array of choices and each choice will have a callback method So as far as I can tell there are three ways to pass event information to a scene 1) use get scene method to get an instance of a scene and then make calls to that scenes methods 2) using event emitter 3) stopping and starting a scene and passing parameters into the create method Is one way preferable or another? is there a good coding standard? Would anyone be able to offer any other helpful hints on how to accomplish the above task Thank you
  13. > but...pixi-timer I don’t understand how to use? Simple. Look in the code , if you like something - take it for your app. Its just someone's two-files plugin.
  14. Thx oh...Turned out to be used... "1 / 60 * delta" or "ticker.deltaMs" This can do what I want! Now I use the following code instead. He should be fine. const seconds = 0; app.ticker.add(delta => { seconds += (1 / 60) * delta; if(seconds >= 0.5 ){ console.log('alert!'); } }); but...pixi-timer I don’t understand how to use? Because I will update the screen through time judgment during recycling. Finally thank you @ivan.popelyshev
  15. It works on my localhost on chrome when i run it (its always worked) but still not on the electron version.
  16. arrays.sort() should work just fine even on 10k elements. Pixi has it in contaner, just enable sorting and sort() will be called in frames if you changed any of elements zIndex - es
  17. Welcome to the forums! Yes. However you wouldnt be able to do it without learning first what is Sprite, what is Texture, BaseTexture, how "Texture.from(myCanvas)" works, how actually "PIXI.Text" works and some other things. Please spend some time learning pixi and experimenting. pixijs examples: https://pixijs.io/examples/#/demos-basic/container.js pixijs wiki: https://github.com/pixijs/pixi.js/wiki also clone sources locally and open in separate IDE window, learn which hotkey in your IDE helps to find classes you want to look. For input use something like pixi-text-input: https://github.com/Mwni/PIXI.TextInput , or just position html input element on top of your "texture" or whatever you will call it after you spend some time with pixi, accessability plugin has tricks like that.
  18. Yes, when i use PIXI.utils.sayHello(type) I get
  19. Scene manager? Its somewhere here: https://exponenta.games/games/game-pack/?v=4 but i dont have unobfuscated version. > So they are kind've like a set of switches, that each time a file is opened, they try to run certain functions What file? Yes. But the way you describing it like some magic means you did not open pixi runner source. I'm disappointed. I thought you already cloned pixi and can search through classes. Its here: https://github.com/pixijs/pixi.js/blob/dev/packages/runner/src/Runner.ts
  20. Are you sure it runs WebGL and not just canvas2d context?
  21. Hi, I have encounted something strange and I don't know how to fix it. I have git cloned the examples page onto a local webserver and the plugin projection, 3D Camera spine layers works fine. But when I try to reproduce it into my electron app, the layers start acting like this. How can I fix this? I've tried everything, why does it work on the examples html page but not on my html page. thanks!
  22. Are the runners kicking off the init() functions in each of the different files? So they are kind've like a set of switches, that each time a file is opened, they try to run certain functions? In your example case those function names are: this.runners = { init: new PIXI.Runner("init", 0), load: new PIXI.Runner("load", 0), beforeAdd: new PIXI.Runner("beforeAdd", 1) }; And this is kicked off for each file via: this.addComponent((this.assets = new Assets(this))); this.addComponent((this.phys = new Phys(this))); this.addComponent((this.mouse = new Mouse(this))); this.addComponent((this.shaders = new Shaders(this))); this.addComponent((this.models = new Models(this))); this.addComponent((this.level = new Level(this))); } addComponent(comp) { for (let key in this.runners) { let runner = this.runners[key]; runner.add(comp); } }
  23. Hey, i am sorry that!!, i go to edit it right now, thanks for ur message!!
  24. I'm going through your app, can you help me understand these runners? in app.js you declare your runners: // Application components this.runners = { init: new PIXI.Runner("init", 0), load: new PIXI.Runner("load", 0), beforeAdd: new PIXI.Runner("beforeAdd", 1) }; Then in assets.js, after loading up your image assets, you kick off a runner using the .run() method: loader.load(() => { this.app.runners.load.run(); }); but I don't understand what this is doing now? What is it executing? I read through the documentation and looked up the runner class in the source code but it is confusing how this is working. Does it call the load() function found within models.js? If so, after completing models.js does the computer go back to line 39 in app.js? this.addComponent((this.phys = new Phys(this)));
  25. Hi @Adele welcome to html5gamedevs 😄. Without seeing the context of your code I cannot help that much. But, I will give it a try. This is how I would implement a double jump on my game. // create a variable canDoubleJump function update() { if (this.keys.left.isDown) { this.body.setAccelerationX(-1000); player.anims.play('left',true); } else if (this.keys.right.isDown) { player.body.setAccelerationX(1000); player.anims.play('right',true); } else { player.anims.play('idle',true); player.body.setAccelerationX(0); } const didPressJump = Phaser.Input.Keyboard.JustDown(this.keys.up); // player can only double jump if the player just jumped if (didPressJump) { if (player.body.onFloor()) { // player can only double jump if it is on the floor this.canDoubleJump = true; player.body.setVelocityY(-100); } else if (this.canDoubleJump) { // player can only jump 2x (double jump) this.canDoubleJump = false; player.body.setVelocityY(-100); } } }
  26. https://github.com/geocine/phaser3-rollup-typescript This is a Phaser 3 starter with , Rollup for bundling and nollup as development server. Hi I am a frontend developer by profession and just thought of digging into HTML5 Game Development amidst this pandemic (Stay at home and take care of your health). This starter is based on the template created by Richard Davey with a number of improvements: Only 1 rollup config for both development and production No JavaScript files are written to disk during development which makes it very fast thanks to nollup Has hot reload feature, code recompiles balzingly fast and browser refreshes as you change your source code. Static files are separated on public folder, sources (TypeScript) on src folder Can easily be deployed to production using a free services like Netlify. With the following configuration Build Command: yarn build Publish Directory: dist This is a sample that is deployed to Netlify, https://phaser3-rollup-typescript.netlify.com/
  27. Would this be the same for a website? Is there some sort of dynamic router that I can use if I am linking everything through a single PIXI.app?
  1. Load more activity