megmut

Members
  • Content Count

    152
  • Joined

  • Last visited


Reputation Activity

  1. Like
    megmut got a reaction from Fenopiù in Best Way to Get Screen Size on Mobile Devices?   
    I apologise in advanced for not hitting your 'senior' or 'well-versed' criteria, but I'll share my 5 cents anyway
     
    I think it's next to impossible to be able to get any website / game, app working 100% across all browsers in one application that scales canvases and webGL. There's a reason why websites often use sub-domains such as http://m.website.com. 
     
    That being said, I tend to pick one good resolution and work out from there. So lets say.. 800 x 600.
     
    Now, scaling is easy, pick a 1.6x ratio to maintain the aspect ration and you've got.. 1280 x 960 and 500 x 375
     
    so there's three resolutions for displaying your game. Then I tackle about determining which to use. 
     
    There's a good answer here: http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript
    Not that I suspect you need it, but maybe for anybody else who reads this answer  
     
    I embed my size determining JavaScript inside a window.onload function and callback to the start phaser function. This stops phaser from ever launching before the width and height have been set. Some people use scaling in sprites.. some people don't do any at all. If you really wanted to optamize to the full extent, you could make all your assets and game to each of those sizes and host all three like... 
     
    1. http://small.mygame.com
    2. http://medium.mygame.com
    3. http:// large.mygame.com
     
    That would keep your app lightweight and you only need JavaScript on your landing page to determine which href location to send them to. 
     
    Alternativly, there have been a few tutorials out there on using phasers antialias / smoothing, like here: http://www.sitepoint.com/modernize-your-html5-canvas-game/
     
    Hope this helps in anyway shape or form
  2. Haha
    megmut got a reaction from OSUblake in Box2D examples   
    @Mat Groves A long time since this was posted I know, but I accessed this link fairly recently but it's broken now. You don't happen to have an old copy on a floppy drive somewhere do you?!
    Cheers!
  3. Like
    megmut got a reaction from 8Observer8 in Phaser and mutiplayer   
    You should check out some of the results on google
    Here's one that appears to be a good read. http://rainingchain.com/tutorial/nodejs
    P.S, you may want to post a question as opposed to a random statement
  4. Like
    megmut got a reaction from jhh1198 in Uploading texture to GPU after loading   
    I don't know if you are aware of this, but there is a plugin on PIXI. The namespace is PIXI.prepare, and the method, upload. I use this sometimes when preparing states and making sure all the assets are correctly on the GPU memory. You can see more here as well as an example: http://pixijs.download/release/docs/PIXI.prepare.html
  5. Like
    megmut got a reaction from Diego Mellizo in Spawning enemies at random period   
    It's best practice to put stuff in the update loop where not needed. The code example would check if the current time is less than the last spawn time on every tick. This doesn't have a bad influence on performance for one check, but over and over.. it would, I'd create something more like:
    var spawnAllowed = true; var enemyGroup; create() { enemyGroup = this.game.add.group(); // create group } createNewEnemy() { if (spawnAllowed) { enemyGroup.create(x, y, cacheKey, frame); // add sprite to group queueEnemy(game.rnd.integerInRange(2500, 5000); // call enemy queue for random between 2.5 and 5 seconds } } queueEnemy(time) { this.game.time.addOnce(time, createNewEnemy); // add a timer that gets called once, then auto disposes to create a new enemy after the time given } Using the time.addOnce will mean there is only one eventListner at a time waiting for a timer callback. 
    There isn't really any difference in code, other than this gives you more control over what happens when creating a new enemy and queueing enemies.. also, it clears up the update loop which is better on performance and generally better practice in game development
  6. Like
    megmut got a reaction from gcardozo in Visual Studio Code Intellisense code completion   
    In the main entry point to your application, you can import directly there. Install PIXI with NPM, 
    npm install --save-dev pixi.js@4.5.1 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. 
  7. Like
    megmut got a reaction from ivan.popelyshev in Inverse Masking   
    @ivan.popelyshev thanks for the quick response. I took a look into the Stencil Manager and will try this route for a while. I'm assuming that with the workaround, it applies only to primitives shapes, or would graduated alpha's work also?
    I do have another quick question relating to this one, if I try to manually reduce the pixel alpha when an inverse mask is applied, how would I go about getting the pixel data, re calculating it and then uploading? My guess would be to get both textures, and extract the pixel data using the extract function on the renderer.. then subtract the inverse mask from the texture pixel data, then re-create the texture and apply it. Is there anyway to manipulate the texture without re-uploading it to the GPU or is this not possible? I'm reaching a little beyond my understanding of how the GPU caches textures, and in what format.. an area I think I'll be learning more shortly!
    Thanks
  8. Like
    megmut got a reaction from Sawyer in Check if path is blocked   
    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.
  9. Like
    megmut reacted to ivan.popelyshev in Guide to pixi-V4 filters   
    V4 filters are differ from V3. You can't just put there shader and assume that texture coords are in [0,1] range.
    I am sorry that you have to learn all of that, and I will make sure that the process will be easier for pixi-v5.
    Filter Area
    Thanks to @bQvle and @radixzz
    First, lets work with the AREA. When you apply filter to container, PIXI calculates the bounding box for it. We are working with bounding box.
    Invariant: maximal vTextureCoord multiplied by "filterArea.xy" is the real size of bounding box.
    Don't try to think about it: its like that because of performance reasons, its not logical in user-experience sense. Neither vTextureCoord dimensions, neither filterArea.xy are predictable, but they multiplication is what we need. 
    Area can have padding, so please don't use it to get "displacement texture" coordinates or any second-hand textures you are adding to the shader, use "mappedMatrix" for it (see below)
    If you want to get the pixel coordinates, use "uniform filterArea", it will be passed to the filter automatically.
    uniform vec4 filterArea; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; They are in pixels. That wont work if we want something like "fill the ellipse into a bounding box". So, lets pass dimensions too! PIXI doesnt do it automatically, we need manual fix:
    filter.apply = function(filterManager, input, output, clear) { this.uniforms.dimensions[0] = input.sourceFrame.width this.uniforms.dimensions[1] = input.sourceFrame.height // draw the filter... filterManager.applyFilter(this, input, output, clear); } Lets combine it in shader!
    uniform vec4 filterArea; uniform vec2 dimensions; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; vec2 normalizedCoord = pixelCoord / dimensions; Here's the fiddle: https://jsfiddle.net/parsab1h/ . You can see that shader uses "map" and "unmap" to get to that pixel
    Now let's assume that you somehow need real coordinates on screen for that thing. You can use another component of filterArea, zw:
    uniform vec4 filterArea; ... vec2 screenCoord = (vTextureCoord * filterArea.xy + filterArea.zw); I dont have an example for that, but may be you need that value for something?
    Fitting problem
    Thanks to @adam13531 at github.
    One small problem: those values become wrong when PIXI tries to fit bounding box: here's the fiddle: http://jsfiddle.net/xbmhh207/1/
    Please use this line to fix it:
    filter.autoFit = false; Bleeding problem
    Thanks to @bQvle
    The temporary textures that are used by FilterManager can have some bad pixels. It can bleed. For example, displacementSprite can look through the edge, try to move mouse at the bottom edge of http://pixijs.github.io/examples/#/filters/displacement-map.js. You see that transparent (black) zone, but it could be ANYTHING if it wasnt clamped. To make sure it doesnt happen in your case, please use clamping after you map coordinates:
    uniform vec4 filterClamp; vec2 pixelCoord = WE_CALCULATED_IT_SOMEHOW vec2 unmappedCoord = pixelCoord / filterArea.xy; vec2 clampedCoord = clamp(unmappedCoord, filterClamp.xy, filterClamp.zw); vec4 rgba = texture2D(uSampler, clampedCoord); Both FilterClamp and FilterArea are provided by FilterManager, you dont have to calculate pass it in "filter.apply", here's pixi code that takes care of that: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L297
    OK, now we have "transparent" zone instead of random pixels. But what if we want it to be fit completely?
    displacementFilter.filterArea = app.screen; // not necessary, but I prefere to do it. displacementFilter.padding = 0; That'll do it. Why did I modify filterArea there, PIXI will "fit" it anyway, right? I dont want PIXI to have time calculating the bounds of container, because maggots are actually changing it, crawling in places that we dont see! 
    No extra transparent space, and if you put it into http://pixijs.github.io/examples/#/filters/displacement-map.js , and you move mouse to bottom edge, you'll see the grass.
    Mapped matrix
    When you want to use extra texture to put in the filter, you need to position it as a sprite somewhere. We are working with sprite that is not renderable but exists in the stage. Its transformation matrix will be used to position your texture in the filter. Please use https://github.com/pixijs/pixi.js/blob/dev/src/filters/displacement/DisplacementFilter.js and http://pixijs.github.io/examples/#/filters/displacement-map.js as an example.
    Look for a mapped matrix: 
    this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); maskMatrix is temporary transformation that you have to create for the filter, you dont need to fill it. Sprite has to be added into stage tree and positioned properly.
    You can use only texture that are not trimmed or cropped. If you want the texture to be repeated, like a fog, make sure it has pow2-dimensions, and specify it in baseTexture before its uploaded on GPU/rendered first time!
    texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; If you want to use an atlas texture as a secondary input for a filter, please wait for pixi-v5 or do it yourself. Add clamping uniforms, use them in shader and make better mapping in "filterMatrix"
  10. Like
    megmut got a reaction from Tilde in Approach for a tennis game?   
    This is actually pretty easy to do. You can either create all your assets with that perspective in mind.. Or, you could skew your entire container. 
    So as a state extends a group (formally a container), then you have access to a method called updateTransform. You can override this and warp the entire container, than thus every child of it. There have been a few discussions on this before, though I haven't seen any working code yet. 
     
  11. Like
    megmut got a reaction from ivan.popelyshev in SVG No Texture Dimensions Until Next RAF   
    Hey guys.. I'm hoping this is something I'm doing wrong, but basically.. when I'm creating a new SVG, it's having width, and height of 1 until 1 frame has passed and then it has actual dimensions. 
    My guess is that the onTextureChange event is being triggered, however the new local transformation isn't happening until the next loop takes place. Here is an example of my code:
    var texture = PIXI.Texture.fromImage('mySVGPath.svg'); var sprite = new PIXI.Sprite(texture); console.log(sprite.width, sprite.height) // 1, 1 setTimeout(() => { console.log(sprite.width, sprite.height) // 500, 465 }, 0); Is there a way of solving this? Thanks!
  12. Like
    megmut got a reaction from Bikas in Postmortem: Medieval Defense Z   
    With regards to the performance issues in PIXI. What you are saying is correct, however there are ways around this. You can actually run two instances of PIXI (background / foreground) and you can set the fps on the background to lower of the foreground. You can also set things like 'clearBeforeRender' to false and preserveDrawingBuffer to true. These I found were some performance gains. You can also create fresh textures out of nested containers and set the cache as bitmap as true until they need to be redrawn and their transformation matrix updated. I hope any of this is help to you
  13. Like
    megmut got a reaction from ClusterAtlas in Container vs ParticleContainer   
    Ah okay, thanks! I've been playing around with a simple particle emitter because, why not.. and I've got it to roughly 30k with multiple textures still at 60fps. I crated some simple pooling and lightweight gravity and velocity "physics". Thanks for the response
  14. Like
    megmut got a reaction from Kraken in Where to get graphics?   
    Graphicriver have a great range of graphics for some very good prices. Here is an example of one.
    https://graphicriver.net/item/jump-game-kits/9998158?s_rank=20
    You can also try and get some artists to make some custom assets for you at fiverr.com. Another example here
    https://www.fiverr.com/zeeshan719/design-game-ui-for-you?context=advanced_search&context_type=auto&context_referrer=search_gigs&ref_ctx_id=e7411688-cd29-42b1-a343-2872526fd356&pckg_id=1&pos=17&funnel=45cc7db8-0089-4645-9bbf-3a5a5d61a48d

    there are plenty of free artwork websites available, such as http://opengameart.org/ which are usually royalty free. Hope this helps
  15. Like
    megmut reacted to mattstyles in Loving pangolins   
    Just saw the google doodle uses Pixi.js! Superb!
  16. Like
    megmut got a reaction from 8Observer8 in Phaser and mutiplayer   
    In all honesty, I've moved away from Phaser to PixiJS for all my game dev projects. The performance increase is phenomenal! I still use Phaser for prototyping as it's very quick to dev. With regards to phaser vs pixi for multiplayer, it really doesn't matter. Your bottleneck will always be the latency between the client and your server. If you are aiming for low end devices, then you can always install box2d on your server, and let the server handle the physics, but that could always end badly if client has ery poor connection. 
    Your best bet, is probably prototype something quickly in phaser knowing full well it's not going to production build. Get to grips with the multiplayer and then take what you learnt and build a development process / schedule.
    That's a really good demo on heroku! I love that you can actually check to see what the server position is!
    with regards to the github repo you linked, I think you are better off creating your own. The core lib hasn't been updated for 5 years and the chances of you finding something that's 100% suited to your needs is slim to none.
    If you want something with a lot more stability and features, you can always have a look at Heroic Labs - https://heroiclabs.com/ It's open source and I've heard great things about it. Can't say I've used it myself though.
  17. Like
    megmut reacted to Get_Bentley in Phaser-Animator UI Plugin   
    Hello Everybody,
     
    I have just finished and am releasing a small UI plugin for Phaser, it is basically a collection of premade tweens in an easy to use and simple interface with set default parameters(which of course can be overwritten). 
    This is my first time releasing anything to the community and all feedback is greatly appreciated. 
    I have put together a site for the plugin found here, there you will find demos of each tween animation I have included into the project. 
    The entire project along with instructions on how to include and use it can be found on github here.
     
    Once again I hope this will be useful to the community as a quick way to either prototype games, or as a tool to quickly add many different tweens with different properties into your project.
    Thank you all for reading and checking it out and please let me know what you all think, if there are any bugs, or anything you believe should be included in the project. 
     
    Happy Coding,
    Get_Bentley
  18. Like
    megmut got a reaction from JTronLabs in Any Performance Benefits to clearWorld = false   
    Okay, so not sure if this will help to answer your question.. but it depends on how well you've coded your game. If you are adding objects to the world, then yes.. clearing the world when you switch state would have a performance increase. I'm not sure if this would help with the loading time of a state, but certainly with playable performance. Here's why..
    Pixi.js is a forward renderer, meaning on the RAF (request animation frame) it requests a list of display objects. The top most, being the game is a container. Inside the game, you have states.. each of these is a container. Inside each state, you may have groups, sprites, menu buttons, bitmap texts etc etc etc.. all of these are display objects. Upon an RAF, there is a recursive function that will traverse the entire game, and get a display list of objects for Pixi to render. Why this matters? 
    If you were creating objects in your game like...
    var sprite = this.game.add.sprite(x, y, frame); var group = this.game.add.group(); var tween = this.game.add.tween().to(); var bitmap = this.game.add.bitmapText(text, font); The problem with this approach, is you are not adding each display object to the current running state, but rather to the entire game object. As a consequence, when you change state, the references to the object still exist, and is not flagged for garbage collection. When you add objects to the state, by using "state.add.sprite.." you are creating a reference inside the state. Then, as you change the state, the state gets destroyed, and any and all objects within that state are also destroyed. If done properly, a clear world shouldn't really make any difference to how the game performs. 
    If you are interested to see how the display list is rendered, check out the pixi.js docs https://pixijs.github.io/docs/PIXI.Container.html#children. Disclaimer: The new pixi docs are way ahead of where the version phaser is still running, but it should give you a good indication of what's going on under the hood.
    Hope this helps in any way!
  19. Like
    megmut got a reaction from mattstyles in Migration to V3.0.0 B1   
    Hey guys, just a really quick note for anybody looking forward to Phaser 3. I cloned the dev branch from git and pulled it into a few of my existing projects. I can't say for certain yet, as I haven't done any really extensive performance testing, stress testing but it seems to be holding it's own. No major errors, or bugs occurring. 
    Will report back when I have more information on how it performs against 2.6.2 (latest);
    Has anybody else updated their games / projects to phaser 3 yet or are you still waiting on updates and patches?
    Just a quick shout out to @rich for all the hard work that's gone into this release. I'm super pleased at how easy it was to migrate. (Note, I was already using ES6, not sure if it made my migration any easier than others). Peace!
  20. Like
    megmut got a reaction from Jem Kazama in auto shot the bullet to locked sprite   
    This is very rough, but you will want something like this. The lock function will fire when you shoot a bullet setting a variable to false. In your move / update function, check against this value to stop moving it the sprite is locked.
    A timer is created for 2 seconds, which on completion will trigger the unlock function, releasing the character. You could go a step further and change the timer to an event callback for the shooting animation, but that's optional. Hope this helps!
    shootBullet() { this.lock(); let bullet = new Bullet(x,y,texture); // instantiation of bullet class this.game.time.events.add(Phaser.Timer.SECOND * 2, this.unlock, this); } lock() { this.locked = true; } unlock() { this.locked = false; } move() { if(!this.locked) { ... // move your char here if not locked } }  
  21. Like
    megmut got a reaction from Igor Georgiev in How to improve performance on mobile   
    Just out of curiosity, try running the bunnimark from pixi.js. If you're new to phaser, then phaser is just the game engine that sits on top of the renderer. The renderer is where all the magic happens. http://www.goodboydigital.com/pixijs/bunnymark_v3/
    I can usually run 100k+ sprites on my laptop at 60fps, and I've got old androids that will run 8,000 - 10,000 sprites at 60fps before I start to see frame rate drop.
    If this is the case, then it may be well worth looking at developing inside pixi.js, without phaser. It seems daunting at first, but it's well worth the effort, trust me!
  22. Like
    megmut got a reaction from webcaetano in PIXI | Phaser - Frontend Game Developer Wanted!   
    Hey guys, I've been playing around with Pixi for a while now and recently started working with a really cool game dev company in Berlin, Germany. They are called Glück Games and build games primarily in Pixi and Phaser.
    If you have good javascript experience, even better if you have experience with PIXI / Phaser, then please go to the link and take a look. I've uploaded some screenshots of some of the games we build. If you have any questions, please reply to this thread, or inbox me . They're a great company to work for and I highly recommend this for someone who's passionate about building professional games!
    https://angel.co/gluck-games-services/jobs/130642-frontend-developer-javascript
    Company Website: https://gluckgames.com/






  23. Like
    megmut got a reaction from VitaZheltyakov in How to disable input to Phaser when someone is typing somewhere else on the page (Not the canvas)   
    Okay, a solution that may work, if you listen for the focus change on your canvas, dispatch an event that the game listens out for to pause the game state. Something like...
    -- in your html -- document.querySelector("canvas").onblur = function() { // canvas has lost focus window.dispatchEvent(new CustomEvent('pauseGame', {detail: 'myParams'})); } document.querySelector("canvas").onfocus = function() { // canvas has lost focus window.dispatchEvent(new CustomEvent('unPause', {detail: 'myParams'})); } -- in the game -- window.addEventListener('pauseGame', function(e) { // pause the game }); window.addEventListener('unPause', function(e) { // user has clicked on the canvas, unpause the game }); Hope this helps!
  24. Like
    megmut reacted to rich in Phaser 2.5.0 Released   
    Phaser 2.5.0 is the latest release of Phaser, and represents another significant milestone in the evolution of the framework in 2016. It was previously released as 2.4.9. However we appreciate that we haven't been following the semver code strictly enough, and that this version (and most before it!) actually contains some significant MINOR level functionality, not just PATCH level. So we've bumped the version number accordingly.
    We have updated the GitHub README with a brand new layout, which should help those new to Phaser. The Phaser Sandbox and all Phaser Examples are also now running under 2.5.0.
    As well as fixing a number of issues, there are some genuinely useful new features added in this release. Not least of which includes the new Weapons Plugin, making creating bullet pools a couple lines of code. Don't worry, it's also easy to exclude from custom builds too.
    There are also some subtle but significant updates to Groups. The createMultiple method has had a nice overhaul, now able to take Arrays of image keys and frames. Group.align allows you to align the children of a Group in a grid formation, with the dimensions and spacing of the grid under your control.
    Continuing from that theme: all Game Objects (such as Sprites and Text) now have a two new methods. alignIn allows you to easily align Game Objects within another Game Object or Rectangle. This is a great way to easily align a Sprite into the corner of the world, or another Sprite. To go with this is alignTo. It works in a similar way, but lets you align Game Objects next to each other.
    It's small changes like this that reduce the overall code of your game, and let you focus on just building it quicker. Of course there are lots of other enhancements in this release, so be sure to check the Change Log to see what else is in store.
  25. Like
    megmut got a reaction from mattstyles in PIXI | Phaser - Frontend Game Developer Wanted!   
    Hey guys, I've been playing around with Pixi for a while now and recently started working with a really cool game dev company in Berlin, Germany. They are called Glück Games and build games primarily in Pixi and Phaser.
    If you have good javascript experience, even better if you have experience with PIXI / Phaser, then please go to the link and take a look. I've uploaded some screenshots of some of the games we build. If you have any questions, please reply to this thread, or inbox me . They're a great company to work for and I highly recommend this for someone who's passionate about building professional games!
    https://angel.co/gluck-games-services/jobs/130642-frontend-developer-javascript
    Company Website: https://gluckgames.com/