Popular Content

Showing content with the highest reputation since 04/22/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

    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.
  3. 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.
  4. 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.
  5. 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.
  6. 2 points

    Line of sight triangles in v5

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

    creating a animated soft color

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

    Space Shooter J Hit

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

    PIXI Interaction Touch

    You rang, m'lord? @JECKL try looking at `renderer.plugins.interaction.eventData.data.global` instead
  11. 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.
  12. 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!
  13. 1 point
  14. 1 point

    How to porpely flip and rotate a sprite?

    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?
  15. 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
  16. 1 point
  17. 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!
  18. 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!
  19. 1 point
    Just started playing today and I'm already addicted. Awesome I really like this game.
  20. 1 point
    Yeah, one more, VERY SIMPLE way to do that, just for Sprite internals: hack calculateVertices. https://github.com/pixijs/pixi.js/blob/dev/packages/sprite/src/Sprite.js#L221 "myText.calculateVertices = hackyFunction" , and function uses only "tx ty " part of transform.
  21. 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!
  22. 1 point

    PixiJS Tutorials or video courses

    hi, did you try filter with google video with pixijs ? I made you a link tag include video filters for french, english, russian ... i don't know your natal language ? You have a lot of video in those 3 language. Maybe also try add spanish , china and korean... it should work, here https://www.google.com/search?q=pixijs&lr=lang_en|lang_fr|lang_ru&newwindow=1&tbs=lr:lang_1en|lang_1fr|lang_1ru,srcf:H4sIAAAAAAAAACXIQQ6AIAwF0duwMWHngSr9QaKlSSk23t4Ed_1Nme3X6PJCLSvJo7rDVp8u9VxIwnrEORQQZ_16gG9KHlWirKEHRXy03TB2f94ZtUAAAA&tbm=vid&source=lnt&sa=X&ved=0ahUKEwiF4N2axZviAhXyV98KHVSGAskQpwUIIA&biw=1502&bih=750&dpr=1.25 you can affine filter with some tag like, `start`, `tuto`, `intro`, `node` ... book i know only french https://ecitydoc.com/download/prendre-en-main-pixijs-1-posons-les-bases_pdf english https://www.amazon.com/Learn-Pixi-js-Create-Interactive-Graphics/dp/1484210956 https://www.pixijs.com/tutorials
  23. 1 point

    Safari Cleanup Issue

    In this case, for SPAs it’s better to not destroy your renderer. You can destroy the display objects (sprites, textures, etc), but keep the reference to your canvas and renderer (make sure you pause the ticker). There’s a limit to how many webgl canvases you can create simultaneously. Better to not continually create and destroy. Maybe there’s some GC trick for Safari, but this has been my standard practice working with virtual dom frameworks.
  24. 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.
  25. 1 point

    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.
  26. 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.
  27. 1 point
    Still on vacation. I cant check the example, but it sounds like you need custom shader and attributes, like in https://pixijs.io/examples/#/mesh/triangle-textured.js
  28. 1 point

    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
  29. 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.
  30. 1 point
    Its cool that you used WebGL for this, and the code is easy to read. Nicely done. I found bug in this example. When snake length is greater than 1 and its moving right when you press up arrow and then left arrow the game resets.
  31. 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"
  32. 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
  33. 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 ?
  34. 1 point

    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.
  35. 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!
  36. 1 point

    Link It Up!

    Saw it on the WebGames subreddit, pretty cool platform puzzle game
  37. 1 point

    JavaScript nested array stumper

    Let me soak some of this up.. I have been non-stop searching, reading and you tube and it slowly coming into focus I have a QB64 code that is working. but it handles arrays differently (and no objects, instead I use TYPE but from the looks of it, that could be used as objects in JS) but the other thing I see, is yes, I did try the above and it worked, the issue came in when I was trying to dynamically increase the array/object and have it auto put in new values for cost and dps instead of doing all by hand. As I kept experimenting, I found that it might be easier to break it down to the names in their own array. (its just for looks, and plays no role) the items/ spells or weapons, in their own array with cost, dps gear[ {cost, dps}] then i could use gear[gearlevel].cost, gear[gearlevel].dps then the other tracking level, gold, etc.. can be in a player object. so that made sense to me, and simple, I could do that, but 20 items each having 10 upgrades and each with cost, dps or dpc can get redundant. thats where I ran into the bump. many languages I work with can do a for x loop => gear[x].cost = xyz and gear[x].dps = xyz, loop, but when I did it, it got some goofy error of gear[x] not defined after the first iteration. so if I read your code correctly, inserting the gear = {} inside the loop should fix that, so that the cost,dps will then be inserted without error? ps I usually have lots of probs with code since I know quite a few languages, sometimes, the code syntax is correct, but not for the language I am working with LOL!!
  38. 1 point

    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
    Nah, it probably wasn't you, its the path serving, it can go a bit screwy (depending on the bundler) when you import straight in to your code like that. There can also be a difference (again, depending on the bundler setup) between prod and dev builds. It all depends how they handle asset loading.
  40. 1 point

    Playable Ads with Pixi Js

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

    How to read pixel color?

    Its better to use pure 2d context for that. Create a canvas, use `getImageData` . If you use it wiht pixi loader you can get canvas either in "texture.baseTexture.source" (v4) or in "texture.baseTexture.resource.source" (v5). Yes, PixiJS does not cover everything that 2d context does, its better to know how it works. I used context2d with pixi webgl many times : https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js Some people take images from loader, make bitmaps from them and use them for interaction P.S. You've missed, this thread is not related to your problem. It happens.
  43. 1 point

    [PIXI] WebGL antialiasing

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

    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
  45. 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!
  46. 1 point
    http://phaser.io/examples/v2/tilemaps/tile-properties Looking at this example here you will see that the loaded tilemap layer doesn't actually fill the whole canvas leaving behind the black background. I want exactly this but I'd like the layer and everything inside to be centered horizontally instead of aligned to the top left of the canvas. Anyone able to help?
  47. 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); } }
  48. 1 point

    Pausing a Javascript game on incoming call

    I use game.onPause.add(myPauseFunction) but this does not detect an incoming call. I'm doing a race game in Phaser and would like to pause the race on incoming call. any idea how to get this event on Phaser / JS?
  49. 1 point

    Welcome to the Pixi.js forum

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