Popular Content

Showing content with the highest reputation since 04/23/19 in all areas

  1. 3 points
    Hello, My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out). Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method) I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code): renderer.addSystem(PIXI.systems.TextureSystem) renderer.TextureSystem.contextChange() // needed to do this loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main function main() { let tex = resources['test'].texture let imgData = new Uint8Array(32*32*4) renderer.TextureSystem.bind(tex) renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) renderer.TextureSystem.unbind(tex) } But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used. I also want to read the previous data and change it, I figured it can be done with: gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But that needs the frameBuffer to be binded first... Hence I tried to also use the PIXI.systems.FramebufferSystem, lol: renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex) gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...? Maybe there should be some Pixi.js functions to do this? Maybe something similar to this: texture.getPixels(x, y, width, height, ArrayBuffer) texture.setPixels(x, y, width, height, ArrayBuffer) I'm new here btw, this is my first post I don't have much Pixi.js experience yet, but I really like it.
  2. 2 points

    Redrawing only when needed?

    I have a method where I have two different changes that can happen in the scene. Tweens and handlers that get run every frame. For tweens I check if amount of active tweens creater than 0, then it means that something is changing. For onrender-handlers I have a custom component that allows for components to register themselves to get onrender -events and their return value will tell if something has updated. If either tween has updated or any of the components requires rendertime, then that frame is rendered. Otherwise no render will occur. In some cases this can be improved by splitting the scene into multiple canvases. One that gets updates rarely and one that holds the actual gameplay and is updated frequently. Though using that method is something that should be clearly thought out beforehand or you'll end up with multiple canvases to render each frame. Having render loop stop completely is something that you shouldn't do. As calling requestanimationframe is really cheap and not worth the trouble to build a mechanic with renderloop cancellation. Easier to just skip rendering on frames that dont need it.
  3. 2 points
    Anchor and Pivot are your friends. If you don't wish to use them because you want to maintain left alignment then consider using a child Sprite, or other arrangement of Containers. Then you can freely adjust the anchor (or pivot) of any child, do the transformation as would be intuitive and the parent will be unaffected. There is minimal overhead in using children and they can improve code readability and maintenance. The alternative (using a single Sprite) involves translating (x=-width) before the flip (scale.x*=-1) or rotation, then translate back again when done. It's unlikely to feel as intuitive - and is likely more prone to mistakes or confusion later?
  4. 2 points

    Cardlings, a digital board game

    Hi everyone I've made a tactical strategy game (single and multipalyer) with the help of some very talented people, including some active users of this forum too. The game will be availble on Steam from June 5th for Windows, MacOs and Linux. Android and iOS versions will follow. Please check out the Steam page or the game's official site for more info. The game was made with our own game engine (WADE) which is free to use if you want to make your own games with it. I'll be writing some blog posts about the development of the game (what went right and what went wrong) as soon as I get a chance.
  5. 2 points
    Does this help? https://www.pixiplayground.com/#/edit/sNKLacqLJenYpsQyc6mIp The issue you were struggling with is that Text is lazily updated. It only usally gets updated when it gets rendered; but you can force it to update with the updateText() function.
  6. 2 points
    Hello, I'm creating a front end for a graph display application. It displays a sort of fancy force directed graph, so there are nodes and lines. I'm using pixi-viewport to contain my main scene so it can be zoomed/panned/culled. Once you zoom in past a certain limit the nodes will start to display a text label across the center. I'm using PIXI.Text for these as I don't control what characters will be displayed. I want the text to look crisp so I'm willing to take the hit of generating new text textures on each zoom action. This isn't too expensive as you have to be so far zoomed into to activate the labels that there isn't to many of them on screen at one time. The problem I have is the the text is inside a container that has the hierarchy for a graph node, its shadow/outer selection, inner ring, icon etc so it inherits the world transform for scale and it causes the text to scale and then look bad. I don't want the text to scale as I regenerate it at a suitable text size each zoom to look perfect. I tried the naive solution of trying to apply an inverse 1/parent-scale which sort of works some of the time but not really. I tried putting the text on a layer above the viewport and manually positioning them and resizing them, this worked perfect till I dragged one node over another and realised z-indexing is broken now that they aren't drawn with the rest of their node display objects. Does anyone know if there is a way to stop the worldtransform from applying to a child/child container? I'm currently considering creating my own container subclass that somehow sets the world transform to identity and just position its local x,y at world co-ordinates inside the viewport, this container will be added into the node hierarchy and contain the text item. I'll need to browse through the code a bit to see how. But I'm not sure if it is possible, even a good idea, or complete madness.
  7. 2 points
    Yes, there is! Here's an example of Shockwave that you could include w/ a `<script>` element. https://cdn.jsdelivr.net/npm/@pixi/filter-shockwave@3.0.1/dist/filter-shockwave.js All filters are published to NPM with bundler file versions ("lib" folder) and a browser version ("dist" folder). You can use jsdelivr or other CDN that allows you to include files from published NPM versions.
  8. 2 points

    Line of sight triangles in v5

    It reminds me of what has been implanted in this game. https://ncase.me/sight-and-light/ I suppose that you have already got your hands on these articles, I share them in case. it in canvas no pixi but it will be cool to see this in pixidemo ! a codepen ** https://codepen.io/xno/pen/YOQZzw https://codepen.io/pandaec/pen/rzxYNB a jsfiddle ** http://jsfiddle.net/nLMTW/ http://jsfiddle.net/s2un50dp/ Shadertoy ** best performance i think https://www.shadertoy.com/view/4dfXDn Some code for do it in a shader GLSL https://stackoverflow.com/questions/34708021/how-to-implement-2d-raycasting-light-effect-in-glsl and a very good article https://www.redblobgames.com/articles/visibility/
  9. 2 points

    creating a animated soft color

    You can do that with vertex shader by giving each vertice a color and then gpu interpolates between those points. Or you can do the calculation in fragment shader to get more refined look. Here's an example how it could be done with fragment shader https://www.shadertoy.com/view/tls3zS For info on how the color palette is done read this article http://www.iquilezles.org/www/articles/palettes/palettes.htm
  10. 2 points

    Space Shooter J Hit

    Hello Everyone. My new HTML5 shoot em up game made using Panda2 This game can play on mobile or desktop, but this game is no sound yet. Special thanks to @enpu, @Stephan and @Wolfsbaneteaching me coding skill, really thanks This game can play on mobile or desktop Try the game in here , hope you enjoy: https://superfranco.itch.io/space-shooterjh Android Version: Google Store Link ScreenShot: How to Play? For desktop control W key - Up A key - Left D key - Right S key - Down P Key - Pause the Game Space - use subweapon For Mobile control You can control the ship movement with JoyStick Click or press the icon to use subweapon and Pause the game. You can destroy the enemy and get money to buy a new ship and upgrade them. Mega Bomb - Mega Bombs damage and clears all forms of the enemy from the screen. When upgraded to level 3 or above,it can also clear enemy gunfire or bullet. Laser - Laser allows you to deal massive damage onto your enemies. Energy Shield - Energy Shield can protect player, When upgraded, it improves the duration of the shield. Mobile version. Android This is a classic vertically scrolling space shoot 'em up game. It has 9 levels with Easy and Hard unlocking regimen. The Hard mode can make double the amount of stars as your reward. You can go to store to upgrade your ship and buy a new ship. How to play -Control the ship movement with JoyStick -Click the icon to use subweapon and Pause the game. Item- Coin - Dropped from enemies , you can take this to upgrade your ship and buy a new ship. Health - Heals 20% of your ship. Subweapon item - increase one Subweapon amount of use. SupWeapon Mega Bomb - Mega Bombs damage and clears all forms of enemy from the screen. When upgraded to level 3 or above,it can also clears enemy gunfire or bullet. Laser - Laser allows you to deal massive damage onto your enemies. Energy Shield - Energy Shield can protect player, When upgraded, it improves the duration of the shield. Ship upgrades are Attack -power of bullets from main cannon. Speed - speed of ship. Health - endurance of the ship. SupWeapon - increase your SupWeapon power or improves the duration of the shield. If you clear all the stage with Hard mode. You are successful to complete the game. Made With: https://www.panda2.io/
  11. 2 points
    If you don't need gradients, there is this clever 3 sprites approach :
  12. 2 points

    PIXI Interaction Touch

    You rang, m'lord? @JECKL try looking at `renderer.plugins.interaction.eventData.data.global` instead
  13. 2 points
    We are working on full example for playable ads with hacks for pixi loader that allow to bundle everything including Spine models into one file . You can either wait 2-4 weeks or do it yourself.
  14. 2 points
    That's exactly why a year ago we've added this awesome API into v5. Right now v5 is almost there, and you can experiment with v5-rc3. I really hope that you like that system because I made it exactly for cases like yours, it was VERY difficult to explain to everyone in the team and get an approval. People need access to textures, authors of PixiJS cant possibly know everything that user wants. This is how you get GLTexture: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js if you call "baseTexture.update()" somewhere before the frame, it will notify TextureSystem that texture needs updating , and then when one of pixi renderers asks to bind that texture, it will call "TextureResource.upload" method. That's how it happens: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.js#L139 According to our main image resource, https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L64, you can track the state not only by dirtyId, but also by "glTexture.width/height" . Basically, if width and height are wrong you upload whole texture, otherwise you go for subImage. As for previous data, readPixels is tricky thing, its the only synchronous operation there. When I use it, I call it only after whole render(), only one time. I suggest to maintain your copy of teture independently from glTexture: in an array or in canvas in your TextureResource, that way you wont need to call readPixels(). SUMMARY: If glTexture width and height are wrong, upload whole array. Otherwise modify part of array you need, put that part into temporary array and call subImage. Dont forget to set width and height to correct values. and HAPPY DEBUGGING!
  15. 1 point

    Growing RenderTexture

    lol crap... seems like my second implementation was all for naught thanks though going to try this now. edit: yep so sure enough my original function would have worked with just adding the false flag to renderer.render Thanks @ivan.popelyshev It seems to be working awesome now, I can start focusing on optimizing my packing algorithm.
  16. 1 point
    Hi. Is this still relevant? I'm interested in collaborating with your team.
  17. 1 point
  18. 1 point
    Hi Ivan, thanks for your reply! I have been debugging (extensively) and it seems the error was caused by some odd state of package-lock.json of npm, or some strange dependency issue. Deleting that file (also did for yarn.lock), plus all the modules, and starting from scratch to install all the dependencies seemed to make the trick. I did not even think of this option, but after your message saying that it should all work fine, I created some basic test with a new fresh project and I realized everything was just working fine. Perhaps this post can help anyone who bumps into a similar problem. Thanks again and sorry for the mess!
  19. 1 point
    Thanks for the responses. I've gone with the calculateVertices method replacement for now, it appears to work perfectly.
  20. 1 point
    Just started playing today and I'm already addicted. Awesome I really like this game.
  21. 1 point
    Ah. Thank you! Turned out that in addition to this, the pixi-viewport library was overwriting all filters for me. After inspecting it's code it turns out that David's viewport is messing too much with PIXI objects. I probably need to write my own simple viewport... Thank you for your help!
  22. 1 point
    Howdy! Brand new to Pixi.js and JS development in general. I have a quick question regarding InteractionManager. I have two objects on the stage: a box with a scroll listener for mousewheel events and multiple boxes "underneath" with pointertap listeners. Is there a way to capture these scroll events and the pointertap events on the objects underneath? The current behavior is.. the scroll events are fired, but because that scroll box is interactive and above the click boxes, the pointertap events are not fired. Any thoughts? Thanks in advance!
  23. 1 point
    Hello, I'm started with pixijs for the web since few weeks ago, I readed the documentation and also readed different post of recommended tutorials in this forum, but not understand well all the pixijs parts, for example the container child events etc. Anyone knows any videotutorials o video courses? any book? Thanks for all!
  24. 1 point
    I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo: https://github.com/Alan01252/pixi-tilemap-tutorial
  25. 1 point
    Hello, nerds ! Happy v.5 release also ! So I`m making pinch to resize(zoom like), stretch and shrink(which is basicly resizing to constant values) over class that extends Sprite or Container. I`m not defently sure what I should extend. My class has methods resize(newWidth, newHeight), stretch() and shrink() . For ease I will call the class Player which extends Sprite or Container with the 3 additional methods. Everything was okay when the parent was Sprite with texture. Then I had to add as child different sprites. So the composition went complex and the algorithm went to the trash. The composition is: Player - extends Sprite or Container, methods resize(newW, newH), reposition(newX, newY), stretch(), shrink(); Background1 - extends Sprite, has texture; visible only when stretch() is called; size - 50x50 Background2 - extends Sprite, has texture; visible only when shrink() is called; size - 100x100 Video - extends Sprite, has texture; always visible; initial size - 500x500 Label - extends Sprite, has texture; visible some times only; size - 70x70 Text 1. At the begining the Player instance has to be shrinked. So the size has to be 50x50. If user tab it, it has to stretch with size 100x100. 2. If user use pinch when it is stretched it has to resize. The question is: In my methods resize(newWidth, newHeight), stretch() and shrink() which children I have to scale, change width and height and so on. Where the factors are - the Background sprites are with different sizes and changing its visibility and the Video sprite is with bigger size than the need. Additional(useless): I tried a lot of things but there is no success. And maybe I`m wrong with something small. If the problem is not clearly defined I`ll make changes! Thank you very much !
  26. 1 point
    Too bad that the forum was down for so long... anyway I peeked at the problem that Ivan encountered in his V5 demos, and found out that syncUniformsGeneration function generates empty function (full story can be found here). Having done that I went back to v4 and got the thing working, with one little caveat that I feel like is worth mentioning. When testing out filters I found out by default the last shader is set active.So if you have multiple shaders setup, you'd have to manually "activate" appropriate shader before writing to uniforms, otherwise webgl would swear at you in console with red errors. In order to do that, however, you'd need access to shader created by this line (cached one will also be fine) 19478: shader = new _Shader2.default(this.gl, filter.vertexSrc, filter.fragmentSrc); However, it is a local variable of FilterManager's applyFilter function, so I ended up using this monstrocity as a workaround PIXI.InjectedApplication = class InjectedApplication extends PIXI.Application { constructor({width = arguments[0], height = arguments[1], options = arguments[2], noWebGL = arguments[3], sharedTicker = arguments[4], sharedLoader = arguments[5]}) { super(width, height, options, noWebGL, sharedTicker, sharedLoader); var oldSyncUniforms = this.renderer.filterManager.syncUniforms; this.renderer.filterManager.syncUniforms = function(shader, filter) { //shader is NOT of type PIXI.Shader but of _Shader2 ! //Call "vanilla" sync uniforms oldSyncUniforms.call(this, shader, filter); //Then call custom one if(filter.syncUniforms) { filter.syncUniforms(shader); } //Save references to filter //in order to be able to switch active shader. filter.__program = shader.program; filter.__shader = shader; }; } updateShader(shader, func) { //this.shaders is just a map of PIXI.Filter shaders let shdr = this.shaders[shader] || shader; let prev = this.renderer._activeShader; this.renderer.bindShader(shdr.__shader); //Make shader use program (openGL terms) func(shdr); //Execute function app.renderer.bindShader(prev); //Bind previous original shader back } } And the use example is simply this: function mouseMoveHandler(e) { let newpos = e.data.getLocalPosition(app.stage); app.updateShader('squareshader', function(shader) { //_uniforms are my custom uniforms and squares is array of structs in GLSL shader._uniforms['squares[0].coords'] = new Float32Array([newpos.x, newpos.y]); }); } Thank you, I already knew that. To my knowelage this also applies to arrays, ex. struct SomeInfo { vec4 color; }; uniform SomeInfo c[2]; to access 1st color the correct string for position getter would be "c[0].color"
  27. 1 point
    Hi, Im trying to make a simple app/feature, that fills an area with random pixels(random color at random time) I have a working solution that is only a handful of lines of code, but its crazy slow. (uses WegGL and Nvidia GTX1060 gfx card + i7 cpu ). The way i fill the canvas with random pixels at the moment is like this: 1) set interval that calls the drawRandomPixels function( it struggles to draw 1 frame every 250 ms ) 2) loop over every pixel coordinate(x, y) and use this.contentGfx.fillColor = 0xFFFFFF * Math.random(); this.contentGfx.drawRect(x, y, 2, 2); 3) after all the pixels have been looped over, call the endFill() and render the stage. Very simple and basic, yet it has massively worse FPS than what i get when i play Battlefield 5 on highest settings. The area that im trying to fill is 250 x 250 canvas. I used 2x2 pixel size to get a bit better performance but its still damn awful. Is there a better way to draw pixels in PIXI ?
  28. 1 point
    Hello, guys! I need some mechanism which can take text and retrieve polygon coordinates of it. Is it possible by using PIXI.Text()/Pixi.BitmapText()? What I mean is: https://p5js.org/reference/#/p5.Font/textToPoints If not, then maybe there is it possibility to parse coordinates from image (png)? Can you, pls suggest something?
  29. 1 point

    Google Web Toolkit (GWT)

    Google Web Toolkit (GWT) is awesome in my opinion. I made simple mini game in Java and it works perfect in browser. Im looking into LibGdx project too - it uses GWT for compiling game into HTML5. https://libgdx.badlogicgames.com/
  30. 1 point

    JavaScript nested array stumper

    Let me soak some of this up.. I have been non-stop searching, reading and you tube and it slowly coming into focus I have a QB64 code that is working. but it handles arrays differently (and no objects, instead I use TYPE but from the looks of it, that could be used as objects in JS) but the other thing I see, is yes, I did try the above and it worked, the issue came in when I was trying to dynamically increase the array/object and have it auto put in new values for cost and dps instead of doing all by hand. As I kept experimenting, I found that it might be easier to break it down to the names in their own array. (its just for looks, and plays no role) the items/ spells or weapons, in their own array with cost, dps gear[ {cost, dps}] then i could use gear[gearlevel].cost, gear[gearlevel].dps then the other tracking level, gold, etc.. can be in a player object. so that made sense to me, and simple, I could do that, but 20 items each having 10 upgrades and each with cost, dps or dpc can get redundant. thats where I ran into the bump. many languages I work with can do a for x loop => gear[x].cost = xyz and gear[x].dps = xyz, loop, but when I did it, it got some goofy error of gear[x] not defined after the first iteration. so if I read your code correctly, inserting the gear = {} inside the loop should fix that, so that the cost,dps will then be inserted without error? ps I usually have lots of probs with code since I know quite a few languages, sometimes, the code syntax is correct, but not for the language I am working with LOL!!
  31. 1 point
    I will look at it today or tomorrow, but there's something i can mention right now : I'm working on new tutorial , https://github.com/ivanpopelyshev/pixi-starfighter , and it has a tilemap based on v5 graphics. You can use the same algorithm for pixi-tilemap. In fact im gonna use the same algo for pixi-tilemap v5 tutorial when I start it. You already have something like that but I'm not sure that everything is correct. For example, im not sure about "tileset.position.set(startCol,startRow);" maybe you need *scale there
  32. 1 point

    JavaScript nested array stumper

    [] = array {} = object That's right and important this here works. I'm doing hard finding the prb without weaponsList. var weapons = [ { name: "Knife", rank: { damagePerClk: 2, cost: 1, }, }, { name: "BFG", rank: { damagePerClk: 9999, cost: 500, }, }, ]; for (var i = 0; i < weapons.length; i++) { console.log("Name: "+ weapons[i].name); console.log("damagePerClk: "+ weapons[i].rank.damagePerClk); console.log("Cost: "+ weapons[i].rank.cost); } it looks like you want to init your weapons in the initGame function. several way to do that. var weapon = []; var weaponList = ['Knife', 'BFG']; var spell = ['Light', 'Fireball']; function initGame() { var wLength = weaponList.length; var sLength = spell.length; for(let i = 0; i < wLength; i++) { weapon[i] = {}; // this is important, creates an object in weapon array weapon[i].name = weaponList[i]; //spell[i].name = spellList[i]; console.log(weapon[i].name); } } function initGame2() { var wLength = weaponList.length; var sLength = spell.length; for(let i = 0; i < wLength; i++) { // push the full object weapon.push({ name: weaponList[i], anotherKey: 0.666} ); console.log(weapon[i].name); } } function initGame3() { var wLength = weaponList.length; var sLength = spell.length; for(let i = 0; i < wLength; i++) { var tmp = {}; tmp.name = weaponList[i]; tmp.foo = "bar"; weapon.push( tmp ); console.log(weapon[i].name); } } hope this helps you.
  33. 1 point
    If there's no rotation involved making a spritesheet parser for any tool is very easy even for people who hate math. It comes usually with a xml or json that lists frames with position, dimension, and names. You extract those names in a loop, create rectangles out of position/dimension, put everything in a dic and voila, now you can run another loop to create texture from the main texture and pass along those frames(rectangles) you created when parsing. NO MATH involved.
  34. 1 point

    JavaScript nested array stumper

    sure you want to stick to array? Object could also be an option. requested Array JS var mobxCnt = 100; var currwavecnt = 80; var Mob = []; // init 1st dimension of array for (var i = 0; i < mobxCnt; i++) { for (var j = 0; j < currwavecnt; j++) { if (j === 0) { Mob = []; // init 2nd dimension of array } Mob[j] = 100; // set hp } } // access console.log('Health: '+ Mob[42][23]); --------------------- if you want more then just hp var mobxCnt = 100; var currwavecnt = 80; var setHP = 100; var setSpeed = 0.3; var Mob = []; // init 1st dimension of array for (var i = 0; i < mobxCnt; i++) { for (var j = 0; j < currwavecnt; j++) { if (j === 0) { Mob = []; // init 2nd dimension of array } Mob[j] = [setHP, setSpeed]; // set hp and speed as single vals in an array } } // access console.log('Health: '+ Mob[42][23][0]); console.log('Speed: '+ Mob[42][23][1]);
  35. 1 point
    Thanks for your reply, but I just got it working. Yes, I want the slide type controls. I added a sprite for the tiller, and created a touch rotate function for it using 'pointermove'. I then record the rotation of the tiller and translate that to the degree to which the boat turns.
  36. 1 point

    PIXI Interaction Touch

    @themoonratPerfect!!! Very Very Thank you! I solved the problem!! @ivan.popelyshev Thank you so much for trying to help me!
  37. 1 point

    Playable Ads with Pixi Js

    Indeed. You can use any bundler(webpack, parcel, rollup, etc) to get a single HTML build with Pixi.
  38. 1 point
    Yep, updateTransform() is blocked for particleContainer children, and its not possible to determine bounds because of that. https://github.com/pixijs/pixi.js/blob/dev/packages/particles/src/ParticleContainer.js#L187 Its not a miracle container, its a thing that throws out many features in favor of faster rendering. Its strange that calculateBounds() isnt blocked there, it should be.
  39. 1 point

    SVG Cache Problem on Chrome

    After a lot of googling I've fixed the problem with adding crossOrigin: true .add('tile_lumber', getImagePath('tile_lumber.svg'), { crossOrigin: true }) I have no idea what crossOrigin does or how it works but it seems to have solved the problem. I got the answer from If the problem occurs again, I'll post here.
  40. 1 point

    [PIXI] WebGL antialiasing

    Oh, that's .. a big problem. I cant even describe everything, its really huge, I can consult people all day about that and they wont understand it in the end. General solution: generate several textures, of different sizes for the circle (different RESOLUTION field maybe). Change between them based on scale. Better to generate it somewhere else than webgl. If you are using pixi-v5 and you know what webgl texImage2d and miplevel is, you can use https://pixijs.io/examples/?v=v5.0.0-rc.3#/textures/gradient-resource.js to generate circle for DIFFERENT LEVELS OF TEXTURE. Colors can be achieved with tinting the sprites, not changing the texture.
  41. 1 point

    AmmoJS support

    BRAVO !
  42. 1 point
    The debug.cameraInfo line of code is from Phaser 2. It doesn’t do anything in v3 (I’m surprised it didn’t throw an error to be honest!)
  43. 1 point
    Just to say that destroy is now working in Phaser 3 official release as follows: this.phaserGame.destroy(true); Thanks very much! This is going to be awesome. Teaching my kids phaser at the moment too!
  44. 1 point
    Okay, I figured it out. new Phaser.Game(((window.innerWidth * window.devicePixelRatio) / (window.innerHeight * window.devicePixelRatio)) * 240, 240, Phaser.AUTO) this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; backgroundLayer.fixedToCamera = false; backgroundLayer.scrollFactorX = 0; backgroundLayer.scrollFactorY = 0; this.collisionLayer.fixedToCamera = false; this.collisionLayer.scrollFactorX = 0; this.collisionLayer.scrollFactorY = 0; this.mapOffsetX = (this.camera.width - this.map.widthInPixels) / 2; backgroundLayer.position.set(this.mapOffsetX, 0); this.collisionLayer.position.set(this.mapOffsetX, 0); I'm using Typescript so I'm just including the important snippets from various files. Create the height of the game to be the size of your tilemap. In my case I'm using 240 currently and then calculate the width based on the height as you can see above. Scale the game using SHOW_ALL so it will take full vertical space and not stretch. Then for each layer you create you must set the fixedToCamera and scrollFactor to be 0. Without these it won't work. I don't know why and would love an explanation as to why. Then finally calculate the X offset needed to center everything horizontally and apply it to the tilemap layers. Everything else you place in your game will need to be offset as well.
  45. 1 point
    http://phaser.io/examples/v2/tilemaps/tile-properties Looking at this example here you will see that the loaded tilemap layer doesn't actually fill the whole canvas leaving behind the black background. I want exactly this but I'd like the layer and everything inside to be centered horizontally instead of aligned to the top left of the canvas. Anyone able to help?
  46. 1 point

    TypeScript vs JavaScript?

    Type correctness is a fallacy, and can not be implemented into a dynamic language without injecting into the runtime, which typescript does not do (although alternatives like flowcheck and some other libs for implementing flow do, it still does not make type checking a silver bullet). Much more info in this article. Having worked with it for an Angular 2 build (which was a horrific experience coincidentally) I can say that using TS creates so many headaches. Importing simple modules becomes an issue and often breaks your build, do you really want to spend half and hour importing a module you want?? Totally bonkers, it should just be a few keystrokes, a bit of network, and boom, get coding. I continually found inaccuracies in documentation as implementations changed which was a pain. I was worried about how TS performs some of its transforms without producing a horrible tangle of inefficient code, turns out that does happen, although a lot of people do work on making these transforms as efficient as possible, its just that some patterns are either not needed or don't work well in a dynamic language. There is also a barrier for every other JS dev, you force them to use TS and not everyone will want to do that (this depends on your project though). The additional killer is that TS is not spec, whilst a lot of what it started considered spec, and certainly its implementation helped the spec to evolve, its a worry. Every time you move away from spec (like Webpack does with modules) you are at risk of moving further away from your chosen language, which is crazy, if your language doesn't support the stuff you want to do then choose another, don't mutate your language beyond recognition, as a web dev you are in a position of luxury here because if the web is your chosen platform then its JS so everything has a pipeline to output JS these days. Typing is useful for large teams as it can make the code easier to understand, but I could dispute this by saying that it introduces a load of clutter and types can be gleaned by a bit of inline documentation, although you wouldn't get static checking (but, see the earlier link, static checking won't secure your program, to the point where it could be pointless). On that, the number of times in TS code I've seen the type specified as <any> because devs haven't put enough effort in (or ran out of time, or, sometimes, been forced in to it because typing is square peg round hole for JS) is shocking and clearly unhelpful. Having said all this, it is gaining popularity so its certainly worth checking out, particularly if you're fond of strongly typed languages (just remember JS is not, and without killing your performance nothing will make it so). Nothing can get you away from this, despite the newer ES2015 class syntax, JS is NOT a classical language. The class syntax is simply sugar around creating a class-like abstraction in a prototypal world. There is nothing superior about OOP or classes, it is simply a different style/flavour/design choice. The reason I bring it up is that if you keep up with a mindset that one thing is superior over another you will overlook anything you deem inferior which means you won't learn its pros/cons and you'll get stuck in your superior world even when you start working on something where that does not make sense. Feel free to ignore, but I'd be wary of pigeon-holing yourself or your tech choices. Learn it all and learn when each different thing makes sense and when it does not. Particularly in the fast-paced JS world, something only remains superior for 6 months, so unless you want to become a dinosaur, keep moving!
  47. 1 point
    Hello everybody, I just wanted to let you know that coming with the 2.4 we have a new Observable Pattern. @Deltakosh is already using them almost everywhere he can for you to observe a particular event. So how does it works There're two parts: the Observable and the Observer. The Observable is a property of an object which represent a given event (like BeforeRender for instance). Users that want to have their own piece of code running in response of such event will register an Observer to the adequate Observable. Then it's the duty of the Observable to execute the Observers, when appropriate. We have two classes Obsersable<T>the implementer uses it to create a property which will trigger all the registered observers.The Generic type T is used to communicate a given data type from the Observable to the Observer. You have the following method/properties: add(): to add an Observer remove(): to remove a previously registered Observer removeCallback(): same as above but giving the callback instead of the Observer instance notifyObservers(): used to notify all the registered Observers (with a little special feature I'll detail at the end of this post) hasObserver: a property that returns true if at least one Observer is registered clear() to remove all Observers clone() to simply clone the object but not the registered Observers. Observer<T> an instance of this class is created when you call the Observable.add() method to create a new Observer. When you no longer want to be notified, you call Observable.remove() giving the same object and you're done! The Special Feature Ok, this one is not the easiest thing to catch, but with an example I'm sure everybody will get through it. Let me first explain the intent behind this feature: Sometime you have many different events that are still part of a "group", then you're faced with the choice of: Create one Observable per event: it's fine grained/efficient, has good performances, but you have to repeat x time the same implementation in your code with few changes. Perfect example: MouseButtonDown/Up/Click/DoubleClick/Move/Enter/Leave: 7 Observables! Create one Observable that will aggregate all these events: then in the T data, you specify which "sub-event" it's about (e.g.either MouseButtonDown or MouseButtonUp, etc.) thanks to an enumeration alike data. The implementation is easier because you only have one Observable to code, but the drawback is that people that only care about MouseButtonClick will still be notified for the 6 others sub events! Which is not the best thing performance wise. The solution: the event mask When you register an Observer, depending on the implementation of its corresponding Observable, you have the possibility to state which "sub events" you can to be notified about (e.g. MouseButtonClick | MouseMove). On the Observable side, when the notifyObservers method is called a given mask value will be specifed to state which subevent it's about (e.g. MouseMove), then only the registered Observers with this mask will be notified! You have the best of both worlds! By default the mask value is always -1, meaning all the bits are set, then all subevent are concerned (which is equivalent to only 1, because there's no distinction). Give me an example! var button2Rect = BABYLON.Rectangle2D.Create(canvas, "button2", 200, 500, 100, 40, BABYLON.Canvas2D.GetSolidColorBrushFromHex("#4040C0FF")); button2Rect.roundRadius = 10; button2Rect.origin = new Vector2(0.17, 0.33); button2Rect.levelVisible = false; text = BABYLON.Text2D.Create(button2Rect, "button2Text", 0, 0, "12pt Arial", "Awesome!", new Color4(1, 1, 1, 1)); // Create an Observer on the pointerEventObservable buttonRect.pointerEventObservable.add((d, s) => { console.log("UP"); }, PrimitivePointerInfo.PointerUp); The Canvas2D defines for Primitives a "pointerEventObservable" property defined as : Observable<PrimitivePointerInfo>. The class PrimitivePointerInfo contains all the data sent by the Observable for each Observer callback to know what happened. But it also defines the different available sub-events: export class PrimitivePointerInfo { private static _pointerOver = 0x0001; private static _pointerEnter = 0x0002; private static _pointerDown = 0x0004; private static _pointerMouseWheel = 0x0008; private static _pointerMove = 0x0010; private static _pointerUp = 0x0020; private static _pointerOut = 0x0040; private static _pointerLeave = 0x0080; private static _pointerGotCapture = 0x0100; private static _pointerLostCapture = 0x0200; public static get PointerOver(): number { return PrimitivePointerInfo._pointerOver; } public static get PointerEnter(): number { return PrimitivePointerInfo._pointerEnter; } public static get PointerDown(): number { return PrimitivePointerInfo._pointerDown; } public static get PointerMouseWheel(): number { return PrimitivePointerInfo._pointerMouseWheel; } public static get PointerMove(): number { return PrimitivePointerInfo._pointerMove; } public static get PointerUp(): number { return PrimitivePointerInfo._pointerUp; } public static get PointerOut(): number { return PrimitivePointerInfo._pointerOut; } public static get PointerLeave(): number { return PrimitivePointerInfo._pointerLeave; } public static get PointerGotCapture(): number { return PrimitivePointerInfo._pointerGotCapture; } public static get PointerLostCapture(): number { return PrimitivePointerInfo._pointerLostCapture; } } When we register the Observer, here's what we did: buttonRect.pointerEventObservable.add((d, s) => { console.log("UP"); }, PrimitivePointerInfo.PointerUp); The first argument is the callback (d, s) are two parameters, d is of type T (then it's PrimitivePointerInfo in our case) and contains the data setup by the Observable, s is of type EventState. EventState is a little class with two properties: skipNextObservers, if you set to true then the subsequent Observers won't be called; mask, which is the mask the Observable used to call the Observers. Then you have the body of your callback (here defined as a lambda, which only does a console.log) The last argument is the mask you want. If you don't specify it, you will be notified of everything, in this case we specify PrimitivePointerInfo.PointerUp to only get notified when the Pointer is Up and nothing else. In the 3D Engine, many handlers were replaced by Observable, there's still a backward compatibility but now, through the Observable, more than one Observer can be notified of a given event. If you have question, don't hesitate, shoot! You can take a look at this file for the complete version of the example above.
  48. 1 point

    Royalty free spritesheets

    http://sprite.slicker.me Check out these royalty free sprites for your next HTML5 game: Transparent PNGs, multiple characters, each with several actions (jump, run, punch etc.)
  49. 1 point

    Welcome to the Pixi.js forum

    Pixi.js looks really good. I'll be trying this out soon!