Leaderboard


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
    Exca

    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
    Gio

    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
    jonforum

    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
    Exca

    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
    khleug35

    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
    themoonrat

    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
    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
  16. 1 point
    visgotti

    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.
  17. 1 point
    before that, I've ready search the google, this forum, stack overflow, and found only broken answers. My doubt: -how can I flip a single sprite in Pixi? What I need: -flip the sprite BUT hold its center (width/2, height/2) in the same place like it was not flipped, without change the anchor. Example: Before: After flip X: NOTE: the sprites stays in the same place X and Y. So how can I do this? Second question: After flip the sprite, how to rotate with origin in its center? The sprite is in the smae position, but I want rotate only relative to width/2 and height/2, and not with the anchor. I've tryed set the pivot to center of size but the sprite is moved to the anchor. Is possible do this without gambling with anchor?
  18. 1 point
    ivan.popelyshev

    Redrawing only when needed?

    https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop As for how to detect if something was changed - we can't implement that because we value readability of PixiJS code more than that feature. Its possible to track changes in transforms, but everything else is difficult. Usually people just set special flag if they app changes something and add "if (flag) { renderer.render(stage); } " in gameloop
  19. 1 point
    Hi. Is this still relevant? I'm interested in collaborating with your team.
  20. 1 point
    Hey there, I made this little game called Life in the Static, the basic gist of this game is that you have an ability to stop time. LINK TO PLAY THE GAME: Tasty Link
  21. 1 point
  22. 1 point
    for example we are loding this PNG file in base64: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC while debugging I noticed that it goes into prepareUrl method which splits the dataURI into two parts: directory: "image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////" file: "9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC" we used Texture.from("data:image/png;base64,..."); before and it worked fine. It's strange, but when pasting this dataUri in pixi playground - it works just fine, so the problem is somewhere in my code!
  23. 1 point
    If you really want move sprites individually and not from container this is more optimised for (let i=0, l=spriteContainer.children.length; i<l; i++) { spriteContainer.children[i].x-=10; }; But move the container are the best practice. spriteContainer.x-=10;
  24. 1 point
    It appears from your code that all of your sprites are the same. If this is the case, I suggest using a ParticleContainer instead as this will vastly improve rendering performance. const renderer = new PIXI.autoDetectRenderer({ width: 1920, height: 1080, preserveDrawingBuffer: true, transparent: true, backgroundColor: 0xffffff, antialias: true, }); let stage = new PIXI.display.Stage(); let spriteContainer = new PIXI.ParticleContainer(); stage.addChild(spriteContainer); for (let i = 0; i <= 150; i++) { let sprite = PIXI.Sprite.fromImage(tallLine); sprite.x = i * 10; spriteContainer.addChild(sprite); } requestAnimationFrame(rafGameLoop); //move all the sprites left 10 pixels per frame const rafGameLoop = () => { requestAnimationFrame(rafGameLoop); spriteContainer.children.forEach(sprite => { sprite.x = sprite.x - 10; }); renderer.render(stage); }
  25. 1 point
    Just started playing today and I'm already addicted. Awesome I really like this game.
  26. 1 point
    I want to restrict the size of the applied filter on canvas. In the below codepen i have set the displacement filter and moving it according mouse position. But the problem is it's covering entire background. I want to fix the size of the filter. I'm new the Pixijs and any help is appreciated. https://codepen.io/ajitcj/pen/yWOaaY
  27. 1 point
    Umz

    Link It Up!

    Brilliant game! Love the sound effect when he falls onto the spikes. Really get a feeling for the pain haha 😁
  28. 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 !
  29. 1 point
    Dude, you're amazing. You always reply right away! > Need ES6 or something like that in the libs., I dont remember exactly. I trid that, no luck > Workaround: If you dont use webpack and other things you can just copy that file to your libRoot or somewhere in your project and remove those lines. Unfortunatelly I do use webpack > That's how pixi-spine works: https://github.com/pixijs/pixi-spine/blob/master/tsconfig.json#L13 I tried the different parameters in that tsconfig.json without sucess. So I'm likely missing something. Anyway, I solved it by removing those 3 lines out of pixi.js.d.ts Now I'll spend some time porting the existing code Very excited to finally try 5.0! Cheers
  30. 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 ?
  31. 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?
  32. 1 point
    RagingPixel

    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/
  33. 1 point
    mazoku

    Blocks Puzzle

    Simple classic Blocks Puzzle game where you make rows and columns of blocks. Play Blocks Puzzle Get Blocks Puzzle for Android
  34. 1 point
    You can use safari remote debugging also https://www.lifewire.com/activate-the-debug-console-in-safari-445798 Though that only works on macos.
  35. 1 point
    DrSnuggles

    JavaScript nested array stumper

    yes, init of the new object in the array is important. It's important because later you want to access gear.something and gear has not yet been created. That's where the error is coming from. JS can not DIM an array from begin like it is possible in other languages. You can DIM with var myArray = new Array(20) but this just creates empty entries and not objects, so you cant set the property "cost". Have look here: https://www.w3schools.com/js/js_arrays.asp var myArray = []; Dim(myArray, 20); // maybe you like this more than the for i=0;i<myArray.length;i++ loop for (key in myArray) { myArray[key].cost = 20; } // another way to fill it myArray.forEach(setDmg); console.log(myArray); // shows filled array function Dim(arr, size) { for (let i = 0; i < size; i++) { myArray.push({}); } } function setDmg(entry) { entry.dmg = 10; } Working with the good old arrays is absolute no problem and a clean way to do that. Try to make it easy for you to understand that code again if you dig it out in some years.
  36. 1 point
    Hey @vsudakov Take a look at https://jsbin.com/nikikirova/edit?js,output Best regards,
  37. 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
  38. 1 point
    xRa7eN

    JavaScript nested array stumper

    OK, I think i have "BASIC" understanding.. Let me know if this is correct: So a "bracket" is used to make the basic traditional array game [] which will give game[0], game[1] etc... correct? Braces will give an object? game{}, so game {name: coolplayer, hp:10} which yeilds game.name // coolplayer? then to combine, make your arrya first? then put in anything you want, but if you want another array, you use brackets again - like so? game [ player[{name:'george', hp:25}]] then I can pull it as such: game[3].player[2].name // george So do I have the gist of that? Seems to work when I test it. Totally not like arrays I am used to LOL, but unique and more flexable So... when i get to this: weapon = [ { name, rank:[ {damagePerClk, cost} ] } ]; works fine if i manually insert data, but if I loop as shown below: function initGame() { var wLength = weaponList.length; var sLength = spell.length; for(let i = 0; i < 14; i++) { weapon[i].name = weaponList[i]; //spell[i].name = spellList[i]; console.log(weapon[i].name); } } crashes. Says "i" is not defined, but that is not the issue. and stops at 1. (example, log shows 0,1 crash). "i" is fine, and if i loop through a list - (spellist for example) it list all my spells as they are. I am guessing it is how I have weapon defined (declared). Right?
  39. 1 point
    DrSnuggles

    JavaScript nested array stumper

    another way is to make the 3rd layer an object. Sometimes it's nicer to access them by names = Object.keys var mobxCnt = 100; var currwavecnt = 80; var setHP = 100; var setSpeed = 0.3; var Mob = []; 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] = {}; // init object as 3rd "layer" Mob[j].hp = setHP; Mob[j].speed = setSpeed; } } // access console.log('Health: '+ Mob[42][23].hp); console.log('Speed: '+ Mob[42][23].speed);
  40. 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.
  41. 1 point
    The issue is your bundler. When you add non-standard things to your 'regular' JS, you can't expect perfect interoperability with JS libraries (such as Phaser) which expect you to write in JS. The issue lies with however your bundler transforms `./assets/button.png`, usually, this will become a file path, which would work fine if, and only if, the paths are correct. I am going to guess that in your case, they are not correct, hence the 404. More strangely, it doesn't even try to insert a path, just the variable name, which either means you're calling Phaser functions wrong, or, the bundler is really mucking you around. Most bundlers that allow you to import asset paths also will handle packing those assets and they _should_ also handle serving it for you in the same way they're serving your HTML and other static code assets.
  42. 1 point
    In npm. Or you can clone the repo and build them. Unfortunately typings for 5.0.0-rc3 have one small problem that had to be fixed manually, so here we go: index.d.ts
  43. 1 point
    grelf

    2D Map Representation as 1D array

    I have managed to rewrite my scene drawing (in www. myforest.uk) so that it does not reallocate two huge arrays and fill them with freshly created objects every time. This rewriting reduces the scene drawing time by about 30%. There is also less variability in the time taken from one scene to another which tends to confirm that garbage collection and reallocation were taking a lot of the time. Reallocation would be variable because it depends so much on what contiguous chunks of memory are available. I have written the following to show some things that developers may need to consider in their own code. My terrain is generated by a function of (x, y) position (in fact a method of an object of type Terra). It is a complicated function so it does not want to be done repeatedly for each position; instead its results must be held in arrays for subsequent reference during scene building. Two big arrays hold the results of that around the (moving) observer's current position to enable the scene to be drawn. For each position the arrays refer to an object of type ScenePoint which contains the distance and bearing of the point from the observer and other things (such as terrain details and amount of fogging for distant points). Each ScenePoint object has 10 properties so requires at least 80 bytes, probably more like 100 bytes allowing for the Object structure itself (I think that varies from browser to browser). One of the big arrays, around [x][y], goes out to the current view range which is user-selectable and can be up to 400 meters, so the array may have to be 801 x 801 to surround the observer. This is now allocated at the start of the program. Each array value will be a reference to a ScenePoint object so the array itself takes 8 x 801 x 801 = 5.1 megabytes. Then the 801 x 801 ScenePoint objects, also now allocated once at the start instead of freshly in each call to Scene.draw (), occupy about 100 x 801 x 801 = 64 megabytes. Another array, ahead , contains references to the same ScenePoint objects but is sorted during scene drawing so that the most distant points come first. This array does not contain references to objects behind the observer and so it is allocated as new Array (400 x 801). It requires a mere 8 x 400 x 801 = 2.6 megabytes. So my latest version of The Forest, v19.4.10 (see www.myforest.uk ) allocates just over 70 Mbytes when it starts and then no longer has to reallocate this (in many pieces) every time a scene is drawn. I still find it remarkable that my scene drawing is done in a couple of seconds even for the 400 metre horizon range. During that time the 'ahead' array is sorted too! When starting to draw a scene 'ahead' has to have all its elements set to undefined because as the observer moves and turns a varying number of points can lie ahead. I rely on the specification for Array.sort() which says that undefined elements get sorted to the end of an array. To support all this I have written a new JavaScript file to create one object of type Around. People may be interested to see it (below) but first Matt: Having made this change it was then easy to experiment with making 'around' a 1D array instead of 2D, calculating the index from x and y myself. I found no difference in performance (in FireFox). // Part of The Forest www.grelf.net (www.myforest.uk) // Copyright (c) Graham Relf, UK, 2019 /** One object of this type is constructed at the start to avoid reallocating * big arrays every time a scene is drawn */ function Around () { var el = document.getElementById ("range"); this.aMid = 0; // The middle index of each x/y array // Find largest range user may select: for (var i = 0; i < el.options.length; i++) { var r = parseInt (el.options .value); if (r > this.aMid) this.aMid = r; } var wd = 2 * this.aMid + 1; this.aheadChange (this.aMid); this.around = new Array (wd); for (var x = 0; x < wd; x++) { this.around [x] = new Array (wd); for (var y = 0; y < wd; y++) { this.around [x][y] = new ScenePoint (0, 0, 0, 0, 0); } } } /** Use at the start of drawing a new scene * NB: mex, mey are rounded observer coordinates */ Around.prototype.init = function (mex, mey) { this.xOffset = this.aMid - mex; this.yOffset = this.aMid - mey; // Clear previous scene: for (var i = 0; i < this.nAhead; i++) this.ahead = undefined; this.nAhead = 0; }; /** Only used if user changes the range (and in Around constructor) */ Around.prototype.aheadChange = function (range) { this.ahead = new Array (2 * range * range); this.nAhead = 0; }; /** Add a ScenePoint object reference to the scene ahead */ Around.prototype.aheadPush = function (sp) { this.ahead [this.nAhead] = sp; this.nAhead++; }; /** How many active ScenePoint objects are currently ahead */ Around.prototype.aheadLength = function () { return this.nAhead; }; /** Get a reference to the ith ScenePoint object ahead */ Around.prototype.aheadGet = function (i) { return this.ahead ; }; /** Sort the ahead array in descending order of distance */ Around.prototype.aheadSort = function () { this.ahead.sort (ScenePoint.prototype.sort); }; /** Get a reference to the ScenePoint object at (x, y). * This is so that extra properties can be added to it. */ Around.prototype.aroundGet = function (x, y) { return this.around [x + this.xOffset][y + this.yOffset]; }; /** Set the fields of the ScenePoint at (x, y) as if freshly constructed */ Around.prototype.aroundSet = function (distance, bearing, x, y, odd) { var sp = this.around[x + this.xOffset][y + this.yOffset]; sp.fogNo = 0; sp.tr = undefined; sp.building = undefined; sp.drawn = undefined; sp.clear = undefined; sp.d = distance; sp.b = bearing; sp.x = x; sp.y = y; sp.o = odd; }; Note that in my previous version of Scene.draw () each ScenePoint object was freshly constructed and subsequently might or might not get extra properties added (such as .tr or .drawn). That was poor practice really. For easier maintenance it should be clear in the constructor as to what properties an object can have.
  44. 1 point
    Deltakosh

    AmmoJS support

    YOU FREAKING ROCK!!!
  45. 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!)
  46. 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!
  47. 1 point
    Tom Atom

    rotate sprite along z-axis

    Tween with yoyo should do all the job for you! Let's say, you have coin atlas and two sprites in it: "front" and "back". Then you can listen to onComplete and change frame in it: var sprite = game.add.sprite(0, 0, 'coin', 'front'); sprite.position.set(100,100); sprite.anchor.set(0.5, 0); var tween = game.add.tween(sprite.scale).to( { x: -1 }, 1000, "Linear", true, 0, -1, true); tween.onLoop.add(function() { sprite.frameName = (sprite.frameName === 'front') ? 'back' : 'front'; }, this);
  48. 1 point
    So I don't have a camera that moves, everything will be in view at all times. I plan on having a full screen game where the center is a gameboard and then I can wrap the left/right sides of the gameboard with info like a scoreboard or a timer etc. So let's say someone is playing on a 1920x1080 screen. I could then calculate my gameboard to be 1080x1080 centered in the screen leaving 420 pixels on either side. The issue is that when I add the tilemap layer it is always added to (0,0) so instead of it being centered with 420px on either side I have 840px on the right.
  49. 1 point
    mattstyles

    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!