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
    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?
  16. 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?
  17. 1 point
    ivan.popelyshev

    Redrawing only when needed?

    Yeah, I also used double-canvas and triple-canvas on slow devices, browser compositeLayers works better than webgl or 2d in that case. Thought i recommend to have only one of them as webgl..
  18. 1 point
    I've been struggling to find a bit of paid work lately, so I have been working on a set of assets that I intend on packing up into an asset pack, the character is in the style of a project that I am currently working on in Phaser 3 titled: "Karzak The Slayer" where you play as a barbarian that has had his victory feast stolen by some mischievous goblins. The tile are nothing alike that project's tiles but any way, I was hoping to supplement the income I have from the days or work I find labouring here and there or odd contracts and this was the best way I could come up with. I started thee project when I was homeless which wasn't too long ago, and a friendly donation from a member of a game development community helped me out of that situation, where I am now under a roof and attempting to get things back up and running, struggling to find work is quite stressful and having my laptop stolen recently, I lost much of the work I would have used for my portfolio, so I decided to start this as a new portfolio piece and as a potential trickle of funds that I would divert to things like my Karzak project IF it gets anywhere. I started this post because I don't quite know of anywhere to post about it, collect feedback or opinions and the like, being an artist I struggle to think of what a programmer or non-creative would consider when looking for a pack of assets for use in any kind of development. I have tried many places like the itch.io devlogs, facebook and other sources to attempt to get some feedback, but people just like or share and rarely read the posts on facebook, which doesn't help when you're seeking information! So if any of you have some time (I apologize in advance if this isn't a good place for this kind of post) I do have some questions not only regarding where would be best for this kind of discussion but about the pack itself (I will share links below) To consider purchasing an asset pack, what do you consider essential? When looking at a character's animation set for a project's prototype asset or final asset, what animations are rarely there when you're developing your prototypes and have bought an asset to use? Do you prefer to get a whole set of assets intended to be used together or do you mix and match? ... I do have more questions but I have a doctors appointment that I cannot miss and time is getting on, I will add more later. Asset Pack Previews: Album link - https://imgur.com/a/r4qs6Dy The above link contains animation previews of both the character and a handful of the enemies, UI previews and some basic tiles I've made. All of the tiles are at 16x16. Monkey Boy Character Asset: I genuinely struggled when it came to the character, I had no idea of what to create, my mind was completely blank, but I didn't want to sit around doing nothing and I hit a creative block in the level design for my project Karzak, so I felt that I needed a little break... Anyway, a random thought came to me about Monkeys and so I decided to make a Monkey-like-Man or as it turned out, boy, and that's how the character was spawned into existence. The style of Karzak was well received and that was just with the prototype art so I decided to use a similar style with these assets and I hope that is instilled in the character, these previews above are not finished though and will get a lot of polish before they are released, but that style will remain the same throughout. Hopefully you can tell that the run style is intended to be a man/boy mimicking a monkey's run. The animations that caused most issue where the jump which there isn't a preview for yet, and the death, I couldn't figure out how I wanted it to look, there will likely be multiple death animations eventually though as I intend on updating the pack a little even once the baseline set is polished and released. At first I wasn't quite sure about the character, I was really unsure in fact about how it looked but it grew on me and now I quite like it! The Snail Enemies: The idea is that these enemies would be able to transition to a vertical climb obstructing the player at times or causing the player to have to get hurt to avoid a greater or stronger enemy, but these blue ones can only move in one direction, whereas another coloured variant would be able to turn around and move the other way, following the direction of the player but sticking to whichever surface they are still on. There is intent on adding an enemy that does this but can hop to local tiles in pursuit of the player. There is a slime enemy that is not yet finished, A giant fish that leaps out of water to get to the player across certain deep water gaps, plant based enemies that are ranged and melee that can leap out of the background to strike the player based on many variations in mechanics or triggers. Conclusion: There is still a great deal of work left to finish on these assets, and it is at this point, taking some time away from my project Karzak, but I am having fun and hopefully it helps a little in the long run with supplementing a little trickle of funds towards it. In any event, it will help me update a new and fresh portfolio with some content that is consistent. I hope to get some feedback from potential users or people that have used assets in the past. -------------------------------------------------- Karzak The Slayer: Title Screen Logo - https://imgur.com/8jLPwa0 Character & Enemies - https://imgur.com/l8yYjHY Old Phaser 3 Demo Screenshot - https://imgur.com/S0fseQt Karzak Animations - https://imgur.com/wIcLPmz Updated Tiles (Style) - https://imgur.com/g4jROEN - https://imgur.com/ruoXbVn -------------------------------------------------- Random animation samples: Goblins - https://imgur.com/a/BwZS3 -------------------------------------------------- I hope you're all having a good day and developing some awesome projects! Kind Regards, Patrick.
  19. 1 point
    A running playground that reproduces this problem would be really helpful for trying to track down what is going on here. You can choose the pixi version using the "settings" button to get your exact version.
  20. 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!
  21. 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.
  22. 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;
  23. 1 point
    First... Just move the sprite container left 10 pixels, then it's children will all move with it. Second, avoid creating functions every frame. Use a basic for loop, or create a function that's reused. But don't create a new anonymous function every frame for within a forEach. You do that everywhere and the garbage will add up quickly.
  24. 1 point
    its not an edge case, sometimes just one resource can fail, depends on what server or service do you use. If its a problem for your users, make a fallback, for example you can start downloading everything again
  25. 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.
  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
    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.
  28. 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.
  29. 1 point
    You are lucky! We are working on examples for playable ads. Unfortunately, they are not available yet. Wait a month or two. Also "no one ever posted their code for the issue" is MY phrase, that's how I explain people why is feature X not available. Someone asks help, I provide a few snippets, they make their app and do not share the result. Then second person asks the same thing. Then third. On 10-th attempt we have a hero who makes an article or repository and shares it with community!
  30. 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
  31. 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
  32. 1 point
    I've made a fork and changed keydown handler a bit https://plnkr.co/edit/EPyxbRDmSg0tstD5Q55h let me know what you think about it.
  33. 1 point
    This can also happen depending on the typescript version you are using, especially if it's the latest one. Start with lower version and see if that fix that problem then increase until you get those errors again. Also an easy fix is to supply those missing types your self with an empty class or interface.
  34. 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
  35. 1 point
    jonforum

    Line of sight triangles in v5

    hum, if am not wrong, this kind of stuff should be done in a shader to get good performance. Di you check work of this guys. https://tarvk.github.io/pixi-shadows/build/demos/system/ https://github.com/TarVK/pixi-shadows i think it similar of what your target? a kind of Ray casting. Also @ivan.popelyshev show here how proceed with a kind of ray shadow from a source with shaders. Maybe play with can inspire you. https://www.pixiplayground.com/#/edit/5bqI8BM2qadFFt8eCWc7n ... this will mean, high cpu work instead of gpu ? hope those link can't help you. Also if you can share some code this will help to understand.
  36. 1 point
    Pixijs has no access to text geometry. We need something like opentype.js to do that. Currently there are two three text plugins for pixi v4: pixi-sdf-text (prerender bitmapfont), pixi-richtext (gen sdf by canvas in runtime) and pixi-ui (no docs, helpful author, just better bitmaptext) There is opentype support in our roadmap, thank you for pointing out one more source that we can look at!
  37. 1 point
    Wolfsbane

    Space Shooter J Hit

    Hey, congrats on finishing another game. I've given it a go on PC for the moment, and got so far as stage 6. It plays really well! And looks pretty good. But no sound? Will play on the Android version a bit later, and let you know how that plays. 👍
  38. 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.
  39. 1 point
    @bubamara Thank you! The answer you gave solved the problem perfectly.
  40. 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);
  41. 1 point
    bubamara

    Low fps particles

    Don't know why Firefox is so slow. But you could reduce number of particles shown/computed. Draw that texture to off-screen canvas, read pixels, check whether yours 2x2 particle is pure black and don't create it in that case
  42. 1 point
    If you use projection for any kind of... projections , not just for ISO stuff, then I doubt it will work with canvas. otherwise just make "renderer.plugins['sprite2d'] = renderer.plugins['sprite'];"
  43. 1 point
    blingbling

    Best io game sites

    I often play io games at caygames.com
  44. 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.
  45. 1 point
    trevordev

    AmmoJS support

    Hey, AmmoJS physics plugin has been added to Babylon preview. It should work well with composite meshes which we've had trouble with in the past with other engines. Let me know if you find any issues or have any feedback. Note: Support for motors, soft bodies, other ammo specific features are not yet supported so yell if you need anything specific for your project. vid.mp4 Examples: Basic impostors: https://playground.babylonjs.com/#7149G4#31 Loading mesh and colliders from file: https://playground.babylonjs.com/#66PS52 Loading and adding colliders manually in Babylon: https://playground.babylonjs.com/#FD65RR Loading and adding collider with joints and pointer interactions: https://playground.babylonjs.com/#DGEP8N WebVR grabbing and throwing: https://playground.babylonjs.com/#ZNX043#1 Docs: https://doc.babylonjs.com/how_to/using_the_physics_engine
  46. 1 point
    OK, so i was wrong about place, its here: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/canvas/utils/CanvasMaskManager.js#L76 https://www.pixiplayground.com/#/edit/wJM_TMiQGVGBuLCdXmKQ4 I made a patch in the end of that fiddle. That patch works only if you specify holes in different direction than the shape. Pixi is not an engine, its open-source lib that can be a part of your engine, and whoever uses it also patches whatever he needs and submits PR. There's no guarantee that certain bug will be fixed, it all depends on the mood of core team and contributors. Holes were added only a year ago, because they weren't available in WebGL version and we cant add canvas-only features. They are passed to "earcut" triangulator lib. When it was done, those changes didnt affect CanvasMaskMakager.
  47. 1 point
    SinhNQ

    Combine Babylon.js with Pixi.js

    Hello, * Introducing a bit of pixi.js: pixi.js has full webgl support, a best framework for 2D game with rendering very fast. Would be great if you want make UI game with pixi.js and combine with babylon.js. (Will I get paid for advertising? NO..🤣) Demo babylon.js + pixi.js : https://jsfiddle.net/y5q7Lb1v/21/ This is a perfect duo for your web game world, which you can create high quality games. 😁 Moreover, you can also use GSAP for creating high-performance animations. Demo babylon.js + pixi.js + GSAP lib: https://jsfiddle.net/y5q7Lb1v/28/
  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
    Tom Atom

    TypeScript vs JavaScript?

    Hi, it is always good to know pure JS, but with TS you get type checking, which prevents errors and increases productivity. TS is not separate language, but it is superset of JS. If you have Java (or C#) experience, then OOP is similar in it (as well as in ES6, but there it is without type checking). If you are on Windows, there is also very luxury IDE - Microsoft Visual Studio Community 2015, which is free for individual developers. It has great intellisense support. In my book I made small comparsion of TS / ES6 / JS: Just for example, consider this simple TypeScript class: class MyClass { private _position: Phaser.Point = new Phaser.Point(); public constructor(position: Phaser.Point) { this._position.copyFrom(position); } public moveBy(x: number, y: number): void { this._position.add(x, y); } } It is compiled into this JavaScript code: var MyClass = (function () { function MyClass(position) { this._position = new Phaser.Point(); this._position.copyFrom(position); } MyClass.prototype.moveBy = function (x, y) { this._position.add(x, y); }; return MyClass; } ()); Or into this ES6 code: class MyClass { constructor(position) { this._position = new Phaser.Point(); this._position.copyFrom(position); } moveBy(x, y) { this._position.add(x, y); } }