megmut

Members
  • Content count

    146
  • Joined

  • Last visited

2 Followers

About megmut

  • Rank
    Advanced Member
  • Birthday 10/01/1992

Contact Methods

  • Skype
    megmut

Profile Information

  • Gender
    Male
  • Location
    United Kingdom
  • Interests
    Programming, swimming, photography, music ... programming

Recent Profile Visitors

1,031 profile views
  1. I have used the builtin tool to screen grab with osx (cmd + shift + 3), however it's actually perfectly crisp..
  2. Thanks for the link, was a good read, though nobody seemed to have a solid answer except for hardware and browser differences. Will look deeper into this. Thanks!!
  3. yes, I thought this might be the case. I'm not sure if the browser is doing it's own interpolation or something. Any suggestions?
  4. You can change the initial velocity in the fiddle on line 8. I've noticed that most html5 games do this now I've started looking, but there hasn't been a resolution or even any good explanation as to why, even if it's not fixable, I'd like to know why this is an issue.
  5. Here is a jsfiddle I made showing the blur. At least, it is on my screen anyway. https://jsfiddle.net/gLnzk8zb/
  6. I've already tried manually using Math.round(x). Didn't help. I've also just tried swapping the render order, so it renders a frame behind, but this didn't work either. I've removed all resizing, as well as any stage / renderer resize. In addition, I've removed the device pixel ratio from the render options, so everything is basically back to basics.
  7. Pretty sure it's not the monitor. I'm using a 13.3 mac book pro and I've tested on other screens. 60 FPS and no frame drops, it doesn't budge from it. Thanks for suggestion rendering round pixels, however that didn't fix the issue. Literally all I'm doing is adding a sprite to the stage and rendering it. I've tried legacy rendering, forcing canvas / webgl, rounding the pixel values myself, removing all scaling, all anchoring. I swapped the sprite for a graphics texture and that didn't help. It's the same on my mobile phone too. I've also tried playing with the FPS, speed and other properties on the Ticker class. To that end, I'm running out of options. Most other PIXI games aren't giving me this issue, but for some reason, mine is I'll put together a demo for you guys to test. I'm not using any current timeStamp method, just using the deltaTime passed by the ticker on the ticker update.
  8. Hey guys, I'm experiencing some bad Ghosting. I can't take a screenshot because it's fine when ever I do it. But basically, when a sprite starts to move quickly (not uber fast), the trailing edge gets blurred. Any reasons why or how I could fix this? Thanks, Nick
  9. pixi

    What do you mean 'look the same' Could you elaborate how they don't??
  10. In the main entry point to your application, you can import directly there. Install PIXI with NPM, npm install --save-dev [email protected] Then, go into your 'main.js' / 'main.js' and add the following import * as PIXI from 'pixi.js'; // or // import {Sprite, Container, AutoDetectRenderer} from 'pixi.js'; // or // var PIXI = require('pixi.js'); Visual Studio Code 'SHOULD' pick up on the js maps from the dist folder in the pixi.js module.
  11. I think the best approach to do this, would be to use a customEvent. This would allow you to emit an event every 60 seconds, and like wise, any state can listen for that event regardless of scope. Thus reducing your binding to have scope of your game at all times. Below is an example. <head> <script> ajax stuff { success: function() { window.dispatchEvent(new CustomEvent('anim', { detail: null })); } } </script> </head> // inside any of your game states window.addEventListener('anim', function(e) { // do some animation things }); This will dispatch an event every time an ajax request is successful, and in side your game, we will listen for the same event to be triggered. CustomEvents are supported by every browser and device except for chrome on an old samsung and Internet explorer 9. So here is a polyfill you can use provided by the nice guys over at mozilla. Just paste this in the head of your html page and you will always have CustomEvents then (function () { if ( typeof window.CustomEvent === "function" ) return false; function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; } CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })(); Hope this helps.
  12. There is a fork of the PIXI v3 branch - https://github.com/ivanpopelyshev/pixi-perspective However, there is talk for it to be a major release in PIXI v5. You can read how the support is going on this post here -
  13. Yes, I have experienced this before. The way I handled it was by adjusting the pixel to meter by a ratio of 100. So when you create your fixtures, create the sizes at pixels * 100, then on the world step, update the texture positions by a factor of 100. There is a good example of this on this thread: however I don't know if the download link still works. here is an example of some of my calculations: this.bodyDef.position.Set(9, this.game.height / 100 + 1); this.world.CreateBody(this.bodyDef).CreateFixture(this.polyFixture); ... this.circleFixture.shape.SetRadius(s / 2 / 100); body.CreateFixture(this.circleFixture); .. let position = body.GetPosition(); sprite.position.x = position.x * 100; sprite.position.y = position.y * 100; sprite.rotation = body.GetAngle(); .. let x = points[t * 2]; let y = points[t * 2 + 1]; vec.Set((x / 100) * 0.5, (y / 100) * 0.5); vecs[t] = vec; This code is taken out of context, so I don't expect anybody to understand what's going on, just an example of how I convert physics positions, to texture positions. Hope this helps!
  14. I would suggest that the easiest way is for you to fire an 'invisible' bullet and check if it ever collides with anything. You can dramatically speed up this bullet as long as it does not travel so fast that it passes through the physics body without registering a collision. I'm quite sure there are more performant ways like drawing a ray line and seeing if that gets intersected at any point between the enemy and the player. I hope this helps.
  15. Yes, that worked fine thanks @ivan.popelyshev There is little documentation on this, so for anybody coming across this.. renderer.plugins.prepare.upload(texture, () => { console.log('single texture complete'); } // multiple textures var textures = [texture1, texture2, texture3, texture4]; for(var i = 0; i < textures.length; i++) { if(i >= textures.length-1) { remderer.plugins.prepare.upload(textures[i], () => { console.log('last item has been uploaded'); }); } else { remderer.plugins.prepare.upload(textures[i]; } } // directly off the back of the resource loader loaderComplete(loader, resources) { let c:number = 0; for(let t in resources) { let texture = PIXI.Texture.fromImage(resources[t].name); if(c >= Object.keys(resources).length -1) { renderer.plugins.prepare.upload(texture, () => { console.log('preloading complete!') }); } else { renderer.plugins.prepare.upload(texture); } c++; } } I couldn't see any documentation on preparing assets directly from the preloader without creating a texture from each one, and using the resource name to make a reference to the texture in cache.