Leaderboard


Popular Content

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

  1. 2 points
    I wrote an article on this. Thoughts welcome! https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c
  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
    themoonrat

    PIXI Interaction Touch

    You rang, m'lord? @JECKL try looking at `renderer.plugins.interaction.eventData.data.global` instead
  12. 1 point
    Russian english here. Thank you! I just had a trip through Sochi, Barselona, Ibiza and Palma visiting major pixijs users and helping them for food I'll board plane to Moscow in a hour. hm, looks like CoffeeScript is the thing that you need 😃 CakeScript doesnt exist, unfortunately. TS is good for people who came from Java/C#/ActionScript3. However it adds complexity for all the tools and plugins. I use TS only with namespaces and simple concatenation with "tsc" tool. I copy "ts.d" files into separate dir to know for sure that typings that i use correspond to the version. It really helps if you have like 50k or 1m lines of code. Yes, you need balance between configs and language. People prefere very difficult configs and tools right now, I'm stick to basics. "references.ts", "tsconfig" and "ts.d" files are analogues to makefile, configure and includes. And webpack is piece of .. js tech.
  13. 1 point
    Are you sure you've got the correct typings for your pixijs version? In v5 animatedsprite is moved from extras to PIXI namespace, and those typings have only stub class. Well, if you dont understand how to fix typings or you cant wait for answer you should use JS. In that case i recommend to clone pixijs repo to your computer because docs can wrong you too. There's a rumor that certain parts of PixiJS will be moved to typescript this year *insert evil laugh here*.
  14. 1 point
    I have updated the pixi tilemap renderer. However it seems that the the .addFrame function has some sort of limit, as it displays at a certain point only a specific amount of tiles. Ivan, can you check the renderer, if I am not wrong please. Fully working renderer: https://github.com/StephanHQ/PIXI-Tilemap-Renderer
  15. 1 point
    ivan.popelyshev

    Growing RenderTexture

    Here's what I did: https://github.com/gameofbombs/pixi-super-atlas This is a public version of something that works in commercial production project. Its for v4 and it uses great hacks that emulate v5 TextureResource. I didnt move it to v5 yet. There's not much docs, but you can understand whats in the functions. https://github.com/gameofbombs/pixi-super-atlas/tree/master/src/core Here look in "Add" and "repack" : https://github.com/gameofbombs/pixi-super-atlas/tree/master/src/core Its the known algorithm, its used by all packers (with modifications of course) . Your algo looks like some modification of bucket algo, it is fine for certain cases but it will be better if you also know what other packers do, as a reference.
  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
    !untrue

    Redrawing only when needed?

    How I usually use Pixi is that the render loop will just keep going. Which is fine for things that are undergoing constant change and interaction, but I'm considering using Pixi for something more static... something that'll display a certain thing.... be interactive and respond when needed, but really be doing nothing most of the time. What I'm concerned about is the idle CPU usage... it uses a relatively small amount of CPU to leave the whole thing running at 60fps doing nothing, but it feels inefficient and wasteful. (As a user of an older mobile device, it really drives me nuts when I encounter a site that's inexplicably a performance pig.) I'm just curious what other people are doing in these situations, and how you approach this. Does it make sense to exit the render loop when everything is finished updating, then have an event put us back in? Can you stop/pause Pixi itself? Or is this just more trouble than it's worth?
  19. 1 point
  20. 1 point
    Hello, I'm trying to optimise at bit my text rendering. I render a graph, and each node in it contains an icon (from fontawesome or similar type font) and the link connecting it can display the relation name. There is only 9 possible icons and 13 relations so it seems like a bad idea to generate 'N' PIXI.Text objects so I thought I'd try just caching the text object in a map and using its texture inside sprites then cleaning up when done. I've ran into two problems though. First the texture wont display unless the text is part of the scene. If I add it as a child the Sprites will work. If I don't they will just be empty. Secondly, if I try to work around problem one by adding the text into the scene anyway the Sprite versions will all flicker when the text is changed (I change the text on a zoom event to scale it sharply) and not appear for a starting frame when the text is added. Is there a way to generate the texture for a text item without adding it to the scene, and could that fix the flicker? I forked someone elses pen to try demonstrate the text being part of the scene issue. https://codepen.io/anon/pen/yWXMJM I did see this project - https://github.com/JiDW/pixi-cocoontext/blob/master/src/CocoonText/index.js But I was hoping not to have to copy all the inners of Text Cheers Bob
  21. 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!
  22. 1 point
    Hi! I think that you could easily implement these controls yourself without paying someone: 1. On mousedown or touchdown record the input value for the Y axis. 2. On mousemove or touchmove compute the difference between the recorded value and the current Y axis input. 3. Translate the camera on the Z axis based on the difference.
  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
    Thanks for the responses. I've gone with the calculateVertices method replacement for now, it appears to work perfectly.
  25. 1 point
    This is also my first post here, but I've been reading these forums for a month. Love this community and projects. You all are amazing people. I am myself an experienced full stack developer, who wants to create a game of his dreams as a side project 😃 I've been playing with Pixi for a few weeks, and I like it so far. I am having some problems with pixi-filters v3.0.2 on pixi.js v5.0.2. I was able to get @pixi/filter-shockwave to work with a Rollup package bundler. But I hate having to rebundle everything after a tiny code change in order to test. I prefer an old fashioned way of adding library files via a <script> tag. Is there a way to manually add a filter such as ShockwaveFilter to the project without having to use a bundler? I see that in pixi v3 it was straight forward (http://jsfiddle.net/up209d/tdetg2h3/) Thanks!
  26. 1 point
    Just started playing today and I'm already addicted. Awesome I really like this game.
  27. 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!
  28. 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!
  29. 1 point
    Thank you! It is in the plans, although I did not have much time for development lately, so I cannot promise it will come soon. I have some changes already done for the next version (touchscreen controls and some important fixes for broken rendering on certain machines and more music tracks), which can be expected soon, but collision is not included yet. I do have some ideas for a solution that might work decently enough and would be fast enough for the browser, if that works out, I could push it out in the next months.
  30. 1 point
    Andrew Williamson

    Pairs - A memory game

    I enjoyed this game☺️. Great exercise for the brain.
  31. 1 point
    In v4 there's that plugin that allows to apply filter to any part of screen: https://github.com/pixijs/pixi-picture Demo: https://gameofbombs.github.io/examples-heaven/?v=v4.8.7#/picture/displacement-backdrop.js Unfortunately, its not ported to v5 yet, so you have to wait a week or two or get back to 4.8.7
  32. 1 point
    Damn it last time you said you are working on an example for playable ad, you said its gonna be done in 2-4 weeks. And that was 2 weeks ago Ok well here we go me trying to make the spritesheet work UPDATE: It works. Apparently you have to call spritesheet.parse(()=>{}) yourself, which I didnt know (Parse takes a callback). And the meta data of the json, does not need any field for image.
  33. 1 point
    timetocode

    Javascript GC or pooling

    GC in javascript is frequently undergoing changes, but for the last few years (if this hasn't just changed...) one of the main problems is that it isn't occurring "in the background when the program is idle" like most people assume. In truth the biggest GC hit occurs while creating a new object -- i know that sounds unbelievably bad but unless it has recently changed that's what is happening. The reason GC is invoked while creating a new object is that the trigger for GC is based off of trying to allocate new memory but discovering too much memory is already used. So right in the middle of important game code it'll periodically perform a round of garbage collection, and then finish creating that new object. This is how one can end up with relatively low CPU usage but still GC-related hitches... the GC is happening at basically the worst time every time. So that detail of GC may change in the future, but if experiencing GC problems here are the two tricks I use most frequently... As @ivan.popelyshev noted a local variable can prevent the GC. We can take a loop that used to create a new Point() (or several) as part of its internal logic. If that object is declared outside of the loop and has its values changed within the loop, then it'll only be created once in total. The second is pooling... but it is important to really understand pooling's benefit else we simply re-invent the GC lag spikes. If a pool dynamically grows and shrinks much then the GC issue will be very similar. Also pools in the past were used to speed up object creation which I'm just going to say is rarely a benefit nowadays. The best pools for mitigating GC are pools that never (or very rarely) free anything at all. For the things that actually benefit from pooling, such as projectiles in bullet-hell game, or particles, this is somewhat reasonable feature. Just create 10,000 particles (or w/e) and recycle them as needed.
  34. 1 point
    Yeah, we know of that problem. We even want to make example like that soon, because v5 is ready and its time to cover it with tutorials. Its difficult to make if you dont understand how exactly PixiJS Transform works (almost the same as Flash transform). `width` and `height` are secondary calculated properties, be vary cautious if you use them! If you dont know how exactly PixiJS reflects "I want this element to have 100px width" - dont use it. There's no layout engine inside PixiJS. There are hundreds of ways to make a mistake in your case. My telepathy doesnt give any answers except "he uses "width" somewhere wrongly", maybe you should post the full demo. Again, the time of response depends on how clear you make it. Big demo = wait for a month before someone gets it. Small obfuscated demo = week. Small demo = day or two.
  35. 1 point
    timetocode

    Line of sight triangles in v5

    Congrats on v5 you awesome people! So a long time ago I was working on top down 2D game that had line of sight, but I ran into performance problems problems that sound like they can be more easily solved in v5. For some reason the forum is not letting me upload images so here are some links. Screenshots: https://timetocode.tumblr.com/post/164071887541/much-progress-screenshots-show-in-game-terrain Video of line of sight https://timetocode.tumblr.com/post/163227386513/11-second-video-tree-blocking-line-of-sight It's just one of those pseudo-roguelike line of sight effects where you can't see around corners (real-time though!). It involved lots of triangles, and the algos were based on Amit Patel's https://www.redblobgames.com/articles/visibility/ To achieve this effect I created a canvas separate from pixi with the shadow color filling the screen, and then I would mask/subtract the triangles generated by the visibility algo. I would then take that resulting image with a littl ebit of blur and put it in a container that was rendered underneath the wall sprites. That was the fast version, I also made another version based on pixi graphics that had other issue. Even the fast version had all sorts of garbage collection problems, probably because it was creating a texture the size of the whole screen every frame and then discarding it. It sounds like v5 can probably handle this feature without generating a texture every frame. Could someone suggest a way to accomplish this in v5? I don't have to put the shadows under the wall sprites if that is particularly hard.. they could be ontop of everything instead -- just whatever stands a chance of hitting 60 fps on a chromebook. TY TY
  36. 1 point
    My example shows a very simple Snake game in TypeScript and pure WebGL. And it shows how to place a TypeScript multi file example on SandBox. If you know how to improve the code let me know. Sandbox: https://plnkr.co/edit/7gjdZi2GNHZvtHQEMc4Y?p=preview
  37. 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"
  38. 1 point
    Exca

    Line of sight triangles in v5

    The method was based on this: https://github.com/mattdesl/lwjgl-basics/wiki/2D-Pixel-Perfect-Shadows
  39. 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
  40. 1 point
    Stephan

    RESOLVED: graphics hires problem

    I just had another look at the problem and I think it is a small bug in the engine. I just posted a pull request for the develop branch to fix the problem.
  41. 1 point
    @bubamara Thank you! The answer you gave solved the problem perfectly.
  42. 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.
  43. 1 point
    DrSnuggles

    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]);
  44. 1 point
    JECKL

    PIXI Interaction Touch

    @themoonratPerfect!!! Very Very Thank you! I solved the problem!! @ivan.popelyshev Thank you so much for trying to help me!
  45. 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
  46. 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.
  47. 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!
  48. 1 point
    xerver

    PIXI.loader.resources or TextureCache

    Dont do this: let e = PIXI.utils.TextureCache[player.img]; Instead use the resources the loader loaded for you: let e = PIXI.loader.resources[player.img].texture; The error you get is because `PIXI.utils.TextureCache[player.img]` doesn't exist, this is happening because you are calling setup manually: PIXI.loader.add(player.img).load(setup); setup(); You pass it in as a callback, then immediately invoke it manually. Don't do that, just pass it in as a callback and the loader will call it when loading has completed (asynchronously).
  49. 1 point
    Hsaka

    Welcome to the Pixi.js forum

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