Popular Content

Showing content with the highest reputation since 05/18/19 in all areas

  1. 2 points

    SpriteStack - 3D Pixelart Editor

    Ahoy there. I have just released a standalone version of my voxel editor where you draw models layer by layer like a 2d image. It features very neat spritesheet exporter with my handcrafted retro renderer made in WebGL. Please take a look at https://spritestack.io/ to get more info. I am also glad to anwser any questions.
  2. 2 points

    3d Highway Racer

    My 3d game in html5. Looking to provide non-exclusive licenses of this game https://playcanv.as/p/f5b2f1db/ Contact me for more details: arif@dumadu.com
  3. 2 points
    Thank you for your answers! I was thinking about creating a custom tools, but I figure this should be a fairly common issue so there had to be a solution out there I didn't know about that PS to Spine exporter, that looks really promising! I'll take a look at it! Thanks!
  4. 2 points

    Cardlings, a digital board game

    Hi everyone I've made a tactical strategy game (single and multipalyer) with the help of some very talented people, including some active users of this forum too. The game will be availble on Steam from June 5th for Windows, MacOs and Linux. Android and iOS versions will follow. Please check out the Steam page or the game's official site for more info. The game was made with our own game engine (WADE) which is free to use if you want to make your own games with it. I'll be writing some blog posts about the development of the game (what went right and what went wrong) as soon as I get a chance.
  5. 2 points
    Trump's Wall Game started out as a joke but somehow manifested into something that is...still a joke. It's a persistent world with one thousand nine hundred and sixty virtual miles along the border. Choose either the red team (builds wall) or the blue team (breaks the wall). Then go nuts and build or break away. Trump's Wall Game is a living breathing thing so any changes you make will be reflected for the rest of the world to see. Oh, we also hired a Trump impersonator to do the voices. That in itself is worth checking out. Enjoy! Play the game here: https://meowyorktimes.com/wall.html Game was created by a three man team in a few weeks. A designer (me), a developer and an artist.
  6. 2 points

    Text smooth scaling / text mipmaps

    I'm glad you that my old plugin can offer some help It is still at an early stage and only tested in pixi.js v4.7. Don't even have a README yet. Since pixiv5 have breaking changes in mesh & bitmap font classes, I still need time to learn and adapt. PR is welcomed! Take this snippet as a quick-start if you don't want to clone my repo and build it yourself: https://jsfiddle.net/g04xLqdh/ BTW: Here is a command line tool to help you generate MSDF bitmap font assets: https://github.com/soimy/msdf-bmfont-xml
  7. 2 points

    Making GUI in 2019 with Pixi

    Do the right side with react, field with pixi. problem solved. The biggest collection of pixi ui elements is https://github.com/pixijs/pixi-ui/ but its not documented nor is it moved to v5 and typescript yet. Text input: https://github.com/Mwni/PIXI.TextInput SDF fonts: https://github.com/PixelsCommander/pixi-sdf-text , https://github.com/avgjs/pixi-richtext We are working on moving all plugins to v5 and we are making new tutorials. I hope in half of year we'll have complete set of stuff for games, but right now its not the case, so go for React to save time.
  8. 2 points
    Are you sure you didn't turn on Battery Safe Mode when trying Cordova?
  9. 2 points
    I wrote an article on this. Thoughts welcome! https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c
  10. 2 points

    Redrawing only when needed?

    I have a method where I have two different changes that can happen in the scene. Tweens and handlers that get run every frame. For tweens I check if amount of active tweens creater than 0, then it means that something is changing. For onrender-handlers I have a custom component that allows for components to register themselves to get onrender -events and their return value will tell if something has updated. If either tween has updated or any of the components requires rendertime, then that frame is rendered. Otherwise no render will occur. In some cases this can be improved by splitting the scene into multiple canvases. One that gets updates rarely and one that holds the actual gameplay and is updated frequently. Though using that method is something that should be clearly thought out beforehand or you'll end up with multiple canvases to render each frame. Having render loop stop completely is something that you shouldn't do. As calling requestanimationframe is really cheap and not worth the trouble to build a mechanic with renderloop cancellation. Easier to just skip rendering on frames that dont need it.
  11. 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?
  12. 1 point
    Thank you very much for the reply! I went to make the breakpoint and it turns out I was using a script tag in the client towards an old version of pixi on Cloudflare before the addition of onLoop. I am updating the script tag to a static route towards the correct file in node_modules (per https://stackoverflow.com/questions/27464168/how-to-include-scripts-located-inside-the-node-modules-folder). I am indeed rather new to open source and had some skittishness about digging into libraries. I'll abolish that effect - for the future, when overriding a Pixi class, do you modify the js file directly or some other method? Thank you again.
  13. 1 point
    Hi everyone, I've implemented a webapp where the user sees a table from top-down perspective and can decorate a cookie. For different sprinkles I've used simple rects and animated them with tween.js (or something like that). For liquid sugar I've modified a native webgl implementation based on the navier stokes equation. The last part to implement are marshmallows. Since the 2d projection of cylinders (which a marshmallow more or less looks like) can vary quite a bit if you rotate it I thought its time to try out the PIXI.Mesh, PIXI.Shader and so on classes. const vertexSrc = ` precision mediump float; attribute vec3 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4(projectionMatrix * translationMatrix * aVertexPosition,1.0); } `; const fragmentSrc = ` precision mediump float; void main() { gl_FragColor = vec4(1.0,1.0,0.0, 1.0); } `; I've noticed from another example that pixi passes a projection and translation matrix already. However... I dont know really how the projection Matrix looks like. If I pass in the 3d cylinder coordinates (range [-100,+100] for each dimension), I can just see two parallel yellow lines with quite a bit space between them. I guess the projection matrix must somehow slice the z-dimension probably at z=0 or something. Sooo my question is ... if I pass in a custom projection matrix is there something I need to consider? or is there any pixi.js magic happen that will make it hard to visualize this cylinder? Thank you very much : -)
  14. 1 point
    https://bugzilla.mozilla.org/show_bug.cgi?id=1501142 Well it's nice to know it's not my game. I almost wonder if it was a design choice by someone for a reason since they capped it purposefully at 16, maybe to prevent some forms of memory being called for that was cleared up for some reason idk, keeping 16 refreshes in memory isn't the most common choice here tho. Thanks for the help! Learned something and got relief it wasn't my game causing it.
  15. 1 point

    Poor Performance on panning

    Hi, I'm trying to make an interactive polygon map with pixi js but panning gets dreadful stuttering on panning with over 6000 polygons. I made a screen record. https://streamable.com/qexxv When I reduce my Polyongs to 1000, panning gets smooth. This is how I add my Polygons to Canvas var g = new PIXI.Graphics(); g.beginFill(1); g.lineColor = 0xffffff; g.lineStyle(1, 0xffffff); g.drawPolygon( arrCoordinates ); g.endFill(); app.stage.addChild(g); and this is my pan function: var lastPos = null $(canvas) .mousewheel(function (e) { zoom(e.deltaY, e.offsetX, e.offsetY) }).mousedown(function (e) { lastPos = { x: e.offsetX, y: e.offsetY }; }).mouseup(function (event) { lastPos = null; }).mousemove(function (e) { if (lastPos) { app.stage.x += (e.offsetX - lastPos.x); app.stage.y += (e.offsetY - lastPos.y); lastPos = { x: e.offsetX, y: e.offsetY }; } }); Could someone tell what I can do to increase performance, please note that I need to interact with almost every polygon. And is it possible to store customs values for each polygon, so when I click on one of them, I would like to display these values, etc? I'm currently working with SVG and it's fine but it gets also very laggy on mobile devices when panning, so I thought pixel graphic would be better.
  16. 1 point
    when exactly do you create Application or Renderer?
  17. 1 point
    It should be dead. I think the problem is actually that your App initialization depends on browser cache and something goes wrong with events, and your app initializes 14 times. Another possibility is that I really dont know modern UI frameworks and instead of full refresh browser just hits the anchor of your page and forces re-load of app router. Which UI framework do you use?
  18. 1 point

    Poor Performance on panning

    there are culling libraries on github for pixijs. The complexity of implementation depends on whether you need to move those polygons later, or they are static. Simple FOR with checking all the bounds maybe enough in your case, if you dont run it EVERY frame. Store a "loaded" part of the map, and if camera hits the edge, re-calculate which polygons should be "renderable" and remember which rectangle did you "load" this time.
  19. 1 point
    You can find a tool to generate JSON file and write a custom PIXI loader for it. I've done similar stuff, here's my in-house framework: https://github.com/pixelpicosean/voltar It is PIXI based, and I have scripts to convert Godot scenes into JSON and load. I've gone that way too far, even heavily modified PIXI to support this workflow though. You can do same thing without modify PIXI at all, only write scripts for features you want (layout with containers/sprites) which I think is fairly easy.
  20. 1 point
    You can also check PixiJS channel on this discord server: https://discord.gg/MEkhFqH Ivan Popelyshev (@hackerham) is admin there.
  21. 1 point
    I want to render a simple JPG (just to begin with) using PIXI v5 inside of my Vue v2 page. The sprite is not rendered (most likely PIXI.Container is not rendered too). Still, I can see in Network that the image is loaded just fine. I append pixi.js app instance on $ref in created() hook. I use PIXI.Loader to load the image - still it does not appear on the screen: just some background color provided on PIXI.Application initialisation. This is how I init pixi app instance: created() { this.$nextTick(() => { const { pixi } = this.$refs; PixiSceneRenderer(pixi); }); }, This is the exported function: export default function PixiSceneRenderer(element) { const app = new PIXI.Application({ // setting like width, height etc }); const { renderer, stage, loader } = app; // Appending view to DOM elem element.appendChild(app.view); const container = new PIXI.Container(); container.x = app.screen.width / 2; container.y = app.screen.height / 2; container.pivot.x = container.width / 2; container.pivot.y = container.height / 2; stage.addChild(container); loader.add('image', require('path to my image')); loader.load(); loader.onComplete.add(onAssetsLoaded); resize(); window.onresize = function(event) { resize(); } function resize() { let w; let h; if (window.innerWidth / window.innerHeight >= ratio) { w = window.innerHeight * ratio; h = window.innerHeight; } else { w = window.innerWidth; h = window.innerWidth / ratio; } renderer.view.style.width = w + 'px'; renderer.view.style.height = h + 'px'; } function onAssetsLoaded () { createElements(); update(); } function createElements () { const texture = loader.resources['image'].texture; const sprite = new PIXI.Sprite.from(texture); // setting up sprite x and y coords, height, width etc container.addChild(sprite); } function update () { renderer.render(stage); requestAnimationFrame(update); } } What am I doing wrong? I followed tuts on this forum and on pixi's docs and still couldn't get a solution
  22. 1 point
    ok, what do i see here: 1. app has no `autoStart:false` but at the same time you use custom RAF. please read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop to avoid that kind of problems in future 2. when you assign container pivot its width and height are zero I don't even know why do you need center pivot without center screen position here. Just delete those lines. 3. you use default canvas width/height which is 800/600 i think. Your image will be pixelated or blurred depending on CSS. Use "renderer.resize()" instead of just css stuff if it evolves into a problem. 4. new PIXI.Sprite.from - from is not a constructor, its a static function . in your case you need "new PIXI.Sprite(texture)". Even with all those problems you should see an image, but you dont! That means that my telepathy didnt pick up your issue. Please make a demo so I or someone else can debug it.
  23. 1 point

    Creating Input element

    How I fixed this: I've put the input and canvas in the same div (this is the parent div) and set the parent div to Relative Set the input field to Absolute, and now you can put it where you want with Top and Left
  24. 1 point
    I've sent you invite to pixijs slack, in case you are interested and you use slack.
  25. 1 point
    @ivan.popelyshev, I think you were right to question the pixel width and height! I looked at the blue arrow png and it was 1920x1080 because of a ton of extra transparent space around the arrow. I edited it down to a much smaller resolution in Photoshop instead of scaling it down in Pixi and now it shows up again! I think this means that the canvas has trouble drawing pngs that have a greater original width or height than the canvas itself in Cordova's WKWebView.
  26. 1 point
    The code i have there is for general case, whether its backed by Graphics or pixi-tilemap or just sprites. I dont understand your question I recommend to use one graphics per many lines, but not just ONE graphics. That's "chunk" optimization, i dont have small example for it, only big ones like https://github.com/ivanpopelyshev/bombermine-shuffle , thats very old one that doesnt use pixi.
  27. 1 point
    @ivan.popelyshev yes sir! I'll study your code. Maybe...do you recommend using PIXI.Texture likes Tilemap?
  28. 1 point
    Keep a list of points and only draw the section you actually need to show. That way you wont need to upload a very large amount of vertices to gpu. Another way to optimize a large set of lines would be to use rendertextures, though if the lines are dynamic then that wont be of help. But for static lines you could build a rendertexture for every 2048 (or lower) pixels and draw the line into that, then clear the line and start drawing again. Then when the old portion would need to be shown you could just use that texture instead of a line.
  29. 1 point
    The problem with that is that the line gets really long as new points are added to it and old points are not removed. Do you need to have it scroll back? If not, then you could keep track of all the points line needs to draw and clear the line graphics every time new line is added and remove the points that have gone past the screen.
  30. 1 point
    You can maintain 2 or more Graphics objects and delete the old one when it goes outside the screen, creating new one at the right side. Or just clear() and move it to right. Also I saw that you depend on RAF too much, if you switch tabs and then switch back, something wrong can happen 2 minutes is strange, i think it'll crash later. First you'll have too many lines inside and everything will disappear because we have only 16-bit indices at the moment. It'll become slow because of constant reupload. The next day it will crash. Are you on linux?
  31. 1 point
    P.s. thank you very much for your amazing work, @ivan.popelyshev. I've been using your pixi-projection plugin recently and it's awesome!
  32. 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*.
  33. 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
  34. 1 point
    This is really well done! Wish I could do pixel art this good for my games.
  35. 1 point

    Growing RenderTexture

    lol crap... seems like my second implementation was all for naught thanks though going to try this now. edit: yep so sure enough my original function would have worked with just adding the false flag to renderer.render Thanks @ivan.popelyshev It seems to be working awesome now, I can start focusing on optimizing my packing algorithm.
  36. 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?
  37. 1 point

    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..
  38. 1 point

    Redrawing only when needed?

    https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop As for how to detect if something was changed - we can't implement that because we value readability of PixiJS code more than that feature. Its possible to track changes in transforms, but everything else is difficult. Usually people just set special flag if they app changes something and add "if (flag) { renderer.render(stage); } " in gameloop
  39. 1 point
    Hi. Is this still relevant? I'm interested in collaborating with your team.
  40. 1 point

    Text smooth scaling / text mipmaps

    You could get really good looking fonts by using sdf-fonts (signed distance field). Though implementing one requires lot of knowledge on shaders. Luckily there's a plugin https://github.com/PixelsCommander/pixi-sdf-text What I usually do though is to have basic textfield with double the fontsize and then use it at 50% scale and try to avoid going over 125% scaling as then it starts to look pretty bad. With the method of forcing to pot I think you need to say in addition that the texture should use mipmapping.
  41. 1 point
  42. 1 point
    That's how you create a texture out of big sheet: "new PIXI.Texture(baseTexture, new PIXI.Rectangle(0,0,32,32))". That question is very frequent.
  43. 1 point
    Thanks for the reply, but I don't think that's the case. The device I'm running it on is Chrome 74 on a windows 10 desktop. It works perfectly fine when I used browserify, but not when I webpack it.
  44. 1 point
  45. 1 point
    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.
  46. 1 point
    https://github.com/jsfehler/phaser-ui-tools This is something I worked on a few months ago to refine my javascript knowledge and eventually my ES6 knowledge. It came about after I realized I kept needing some of the same things in my Phaser projects. It contains the following classes to make building a UI in Phaser easier: - TextSprite - TextButton - Column - Row - Viewport - Scrollbar - Valuebar - Quantitybar - Wheel3D For many projects, it may make more sense to build the UI in HTML and overlay it. I'm not making an argument for that one way or another. These classes satisfied my use cases, and I hope someone else finds them useful. Phaser UI Tools is available under the MIT license, so feel free to use any parts of the code in your own projects in whatever way you'd like. However, if you do anything that improves or adds to what's here, I'd always appreciate a Pull Request. I consider this project relatively complete, so I won't be building any completely new features in the future, but I'll answer any questions and try fo fix any bugs that are reported.
  47. 1 point
    Mat Groves

    Is pixi.js dying?

    Good question! Theres lots of reasons! 1 - I genuinely feel happy when I see something we created help other people to create. 2 - I find it super challenging, constantly trying to be render things faster, whilst hiding away complexity from users (not everyone wants /needs to know webGL). can be frustrating, but ultimately makes you feel warm and fuzzy inside when you figure out a new way to do something thats faster and easy to use. 3 - I get a serious education in how the team manage communities, and how to work with other devs. 4 - Team is cool smart bunch o'people. I like interacting with them 5 - Its helps our agency from a business perspective through increased exposure. 6 - Its ultimately helped me become a better dev. 7 - We would have build something like pixi internally anyway as it helps us make what we need more effectively, we just went a step further and shared the code No plans on stopping anytime soon!
  48. 1 point
    Tom Atom

    rotate sprite along z-axis

    Tween with yoyo should do all the job for you! Let's say, you have coin atlas and two sprites in it: "front" and "back". Then you can listen to onComplete and change frame in it: var sprite = game.add.sprite(0, 0, 'coin', 'front'); sprite.position.set(100,100); sprite.anchor.set(0.5, 0); var tween = game.add.tween(sprite.scale).to( { x: -1 }, 1000, "Linear", true, 0, -1, true); tween.onLoop.add(function() { sprite.frameName = (sprite.frameName === 'front') ? 'back' : 'front'; }, this);
  49. 1 point


    Howdy folks. Just wanted to chime in with a few comments: Someone mentioned that there's a lot of extra baggage in TweenMax like CSSPlugin that perhaps you don't need - you can simply use TweenLite and TimelineLite separately to keep things very small. TweenMax is intended to be super robust and easy to drop in without hassles of loading multiple files, that's all. With TweenLite/Max, you get the lagSmoothing() feature baked in which helps automatically recover from lag without skips/jumps, all while keeping every animation perfectly synchronized across the board. I'm not familiar enough with Phaser's built-in stuff to know if it has that sort of feature, but I've never seen any other engine that has it. You can read more at http://greensock.com/gsap-1-12-0 Again, I'm not familiar enough with Phaser's built-in capabilities but I'd venture to guess that there are quite a few features that GSAP offers uniquely, whether that be nestable timelines, animation along beziers, complex overwrite management options, unique eases like RoughEase, SlowMo, tons of callbacks, etc. There's a page that discusses some of this stuff at http://greensock.com/why-gsap/ in case it's helpful. Rich is right - TweenMax.pauseAll() and TweenMax.resumeAll() are probably the most intuitive option for what you guys are describing, but I'd also point out that you can use TimelineLite.exportRoot() to basically have it take all of the active tweens at any given time, wrap them in a TimelineLite which you can then control however you want, like pause() it or tween its timeScale to make things go in slow motion. The really cool thing about this is that you can then create new tweens that still work while all the others are paused (or slowed down or whatever). Imagine a game where you want to pause the game but open a modal window and when the user is done interacting with it, it tweens out of the way and you resume() the game. As far as the license goes, most people don't need the special commercial license, but we like to think it pays for itself very quickly in cases where you do need it. See http://greensock.com/licensing/ for details. Happy tweening!
  50. 1 point


    It's totally fine. Maybe you want to make sure that you pause all your greensock tweens when phaser gets paused (manual or by code/lost window focus) so that no tween is running during the pause. I used TweenMax.globalTimeScale(0) && TweenMax.globalTimeScale(1) in the past to do so. This will affect all running tweens or timelines. By setting the time scale to zero TweenMax will set the time to a nearly infinity long duration which equals to a full pause. Set it back to 1 to resume. Use the phaser signals game.onPause and game.onResume to register these actions. game.onPause.add(function(){ TweenMax.globalTimeScale(0);});game.onResume.add(function(){ TweenMax.globalTimeScale(1);}); Regards George