Search the Community

Hi! I am loading SVG images in my application. The SVGs don't have a width and height defined in the file, but the viewbox. Loading them basically works with Pixi.js. But my problem is, that those SVG images are rasterized to an image default of 150x150px - in Chrome. In Safari on MacOS they are rasterized MUCH bigger. Is there any option, to tell the Texture Loader to use a given size? This would prevent above behaviour AND give the user the option, to define the size before rasterizing the image. I wouldn't want to set width and height in the SVG files. I looked a lot in BaseTexture and tried loader plugins (e.g. pre), but couldn't find any options to leverage. Any ideas appreciated, on how to tell the Loader which size the SVG should be rasterized Kind regards John

Hi, I'm trying to develop a game in Phaser 3 where player is able to select a stage (basically a scene) of their choice. I want this selection menu to be like a map. This is how SVG file looks like. <svg> <g> <path id="land" class="land" d="M138.114,402.543l0.683,1.604l-1.204.(truncated)"> <path id="ice" class="ice" d="M238.114,402.543l0.683,1.604l-1.204..........."> <path id="water" class="water" d="M538.114,402.543l0.683,1.604l-1.204........"> </g> </svg> How do I add event to each of these path ? They all are inside one svg file. Normally, in vanilla JS we could select an element by id or class. If I load entire image at once using load.svg() adding event affects entire svg image. I can't tell which path was clicked. After more digging, I thought of drawing the map using Phasers graphics.fillPoints(). That way I could have reference to each area I draw. But again fillpoints expects arguments to be an array of Geom.Point and SVG's path attribute has different format (d="M238.114,402.543l). So, I can't do this either. I appreciate any help or suggestions for achieving what I am trying to do.

Quite a newbie on phaser, developing a new product and I saw this regarding phaser 2: Does this still happens on Phaser 3? Or is it possible to render an SVG correctly now? I'm having the following problem: Say I have this svg: and when I render to my game, thats the result I got: (I'm not scaling it) 1- Whats wrong with that? And how can I fix it? 2- Also, is there a way to scale the svg without deforming it? I'm using setScale(x) and the image gets real ugly

Hi everyone! https://vtange.github.io/boxgun/ This is Boxgun, my first game with BabylonJs! It’s a projectile game. You have 10 seconds to drag and shake the crystal you see on-screen to charge the box cannon, with which you try to fire a box as far as you can! The game stops when it detects your box is done moving. Controls: (in menu) Z or Enter: ‘OK’ in menu up, down: move up and down the current menu. (in game) Spacebar: fire P: pause, unpause …or you can just use your fingers or a mouse Note: Babylonjs only powers the 3d picture parts. The UI is actually an HTML5 DOM overlay. Enjoy!

Some time ago there was a bug report of a problem with rendering SVGs in iOS and MacOS, at least older ones. You can see it there: https://github.com/pixijs/pixi.js/issues/3433, but here is a short description as far as I've digged it. On some old Apple devices, iPad 4 / iOS 10 for me, if you load a number of SVGs, make sprites of them and place said sprites on stage, some of these sprites will 'leak' on one another. For example, if you load a green rectangle SVG and then blue circle SVG, sprite made from second one will contain expected circle drawn above unexpected rectangle. This is an old bug still found in v5.0.0 rc-3. Sadly, I found no solution to it. There are cases when it shows and cases when it doesn't, but no way to be sure. Since it is crusial for the project I'm working on, I've made a short test code to check if the current device have this bug, so I can switch to PNGs. In case anyone needs this, you can see it below. It is written for Pixi v5.0.0 rc-3 https://codepen.io/takopus/pen/EJpjXL The idea is simple: I load assets - rectangle and circle - make sprites, place them on stage and render it (you have to do it to catch the bug). Then I extract circle into Uint8ClampedArray of pixels and get alpha value of some corner pixel. If there is no bug, it will be 0 (since there is no pixel there). If the bug is here, it will be 255 cause of rectangle rendered below the circle. Hope this will help someone until this bug gets fixed!

Hi guys, I'm trying to draw a polygon/line from the coordinates of an svg path. I thought to use the path2d method, as it works correctly on native canvas, but I cannot make it work with pixi and couldn't fine anyone talking about it around. Something like this, but it's not working: let trackPath = new Path2D("M10 10 h 80 v 80 h -80 Z") graphic = new PIXI.Graphics() graphic.drawPolygon(trackPath) app.stage.addChild(graphic) Anyone?

I'm in an early phase of a new project and I'm considering using Pixi for it. I think it's a good idea to ask the community before going further.. Basically, I have multi-layered maps with many different models (up to 12) the top layer is interactive, and when I click on a zone I can choose what map model to display for this zone. Heres an image of what I have in mind : https://i.imgur.com/UafKavW.jpg The solution I'm thinking of : Outside Pixi : 1 - I choose one of the available map model to display. 2 - I click on an element of a transparent SVG that is placed above the canvas. 3 - I Get back informations about this element (path description, bbox, etc...) In Pixi 1 - I ask pixi to create and display a sprite with the chosen map model and the SVG element as a mask. 2 - I can, eventually, choose to apply a filter to this element. Do you think that pixi.js can handle something like this ? Is it a good idea to use pixi for this ? Does using pixie will help with the speed over a vanilla DOM/SVG solution ? Thanks in advance to the experts !;)

Has anyone successfully loaded an SVG file on IE11? Even the Phaser 3 SVG example crashes on IE11.

I'm able to load an SVG file containing a single image. Is it possible to load an SVG that contains multiple images? Is it possible to animate multiple SVG files?

Hi, one of the things I was excited about for phaser 3 was the possibility of using svgs to make really crisp good looking games. Just wondering though whether there is any way of using svgs for a tilemap, or is there another way of getting good looking tilemaps without huge filesizes? Thanks, Gordon

Hello, I'm trying to create a map based on a single SVG file (I don't want tiles). The idea is to create a map from Inkscape or Illustrator and then split the XML (svg). Since SVG it's just a XML file, I can extract each "g" nodes to create a PIXI Graphic but the "g" nodes are strings and I don't know how to create a graphic from a SVG xml string. If you have a better idea to create maps (no tiles) please let me know!, otherwise how can I create a graphic from a SVGXML String. Thanks!

I have a detailed SVG file, and I want to be able to zoom in and out of it in-game, by a large factor, in realtime, while still maintaining perfectly crisp antialiased edges. From what I've gathered, PIXI's SVG support is limited to pre-rendering a raster texture on load, which wouldn't work here as the required resolution for the closest zoom level would create an unmanagably huge texture. I don't need support for gradients etc, just simple colours and paths. I could triangulate the SVG file using something like svg-mesh-3d and then render it out as a mesh, however that leaves the question of how to render out the colours properly - I'm not quite sure how a PIXI mesh object could be made to handle this. Perhaps some kind of shader? Also, the triangulation has the downside that smooth curves will have a limited 'resolution' depending on the number of triangles, but that's not a massive issue for my application. Is there a better way I'm missing? If not, any guidance on how to handle the colour rendering on the mesh would be appreciated.

Hi there, I'm looking for a way to display audio with an SVG file withe a web browser. And I don't know how to do so. I found a thread on StackOverflow but I can't comment it, so I started a new thread. So, this webpage seems to be working with this code: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/1999/xhtml" viewBox="0 0 1600 1000"> <defs> <style> :root { background: black } text { fill: white; font: 60px sans-serif; font-weight: 900; text-anchor: middle; pointer-events: none } #about { pointer-events: visiblePainted; } a { fill: #4096EE; } a:hover { text-decoration: underline; } .button:hover { filter: url(#huerot80) } .button:active { filter: url(#huerot50) } #about { font-size: 12px } </style> <filter id="ds"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <feOffset dx="2" dy="2"/> <feComposite in="SourceGraphic" operator="over"/> </filter> <filter id="huerot80" x="0" y="0" width="1" height="1"> <feColorMatrix type="hueRotate" values="80"/> </filter> <filter id="huerot50" x="0" y="0" width="1" height="1"> <feColorMatrix type="hueRotate" values="50"/> </filter> <linearGradient id="stops"> <stop style="stop-color:#4096EE;stop-opacity:1" offset="0"/> <stop style="stop-color:#4096EE;stop-opacity:0" offset="1"/> </linearGradient> <linearGradient x1="0" y1="0" x2="0" y2="-1.5" id="fill" xlink:href="#stops" spreadMethod="reflect"/> <linearGradient x1="0" y1="0" x2="0" y2="-1.5" id="stroke" xlink:href="#stops" spreadMethod="reflect" gradientTransform="scale(1 -1)"/> <script> function $(sel) { return document.querySelector(sel); } </script> <audio xmlns="http://www.w3.org/1999/xhtml"> <source src="media/bubbles.ogg" type="audio/ogg"/> <source src="media/bubbles.mp3" type="audio/mpeg"/> <source src="media/bubbles.wav" type="audio/x-wav"/> </audio> </defs> <g class="button" transform="translate(600, 200)"> <rect width="400" height="86" rx="16" fill="url(#fill)" stroke="url(#stroke)" onclick="try { $('audio').currentTime=0; } catch(e) {} $('audio').play()"/> <text x="200" y="65" filter="url(#ds)">Click me</text> </g> <g class="button" transform="translate(600, 300)"> <rect width="400" height="86" rx="16" fill="url(#fill)" stroke="url(#stroke)" onmouseover="$('audio').play(); $('audio').loop=true;" onmouseout="$('audio').pause(); try { $('audio').currentTime=0; } catch(e) {} $('audio').loop=false;"/> <text x="200" y="65" filter="url(#ds)">Hover me</text> </g> <text id="about" x="50%" y="50%">This example uses HTML5 audio together with SVG. <a xlink:href="http://soundbible.com/1137-Bubbles.html">Bubbles sound effect</a> recorded by Mike Koenig (<a xlink:href="http://creativecommons.org/licenses/by/3.0/">CC-By</a>). </text> </svg> And when I try to copy/paste it and try it to understand how it works and how to modify it, i get a problem: When I try to trigger the audio (with the click or the hover): TypeError: $(...).play is not a function[En savoir plus] test.html:1:1 TypeError: $(...).pause is not a function[En savoir plus] I tried several things but I couldn't solve this problem and display audio with my web browser (firefox and chromium). Thank's for your help ^^ If you know an other light way to play audio with an SVG file I'm also ready to hear it ^^ Cheers

Greetings all - I've been working on an SVG editor and variations generator for some time, and I finally launched the beta this week - we have some really beautiful game art - over 500 of the CC0 pieces from Kenney.nl, and 400 of the best Glitch game art pieces - and more. The editor has over 33,000 graphics including a bunch of icons and emojis - and right now I'm offering a free upgrade to pro for game developers - the upgrade URL is https://www.kwippe.com/app.html#upgrade_beta - with the code betauser I would love any feedback or suggestions about how to make this app BETTER for game developers! I am a long time flash dev who morphed to JS about 5 years ago, and spent a while working on my first all gamified app using Pixijs last year. I've tried to add ways to edit SVGs as painlessly as possible, as working in Illustrator for hours on end tends to make my hand hurt! But there are many fixes and upgrades I plan to make to the app, so please realize it's just a beta.

Hi, I'm making platform games with phaser, and to do so i prepare my levels in inkscape, i give a label to each image so when i end it i finally get an .svg document with an x and a y for each labeled element. Then i replace and delete all the useless text with my code editor till i get it in a .json format so i can pass it to my game as a new level. Is a repetitive and boring work, i hate it. So now i'm thinking in write a little "program" or script to do it. What i really don't know is how to pass through a text that it isn't an html or a php. i would prefer to code it with js as is the language i know most, but i'm open to suggestions. I think it shouldn't be so difficult as is only gather some text and creating a new document, but i don't know where to start. Thanks!

Hey guys if it's possible / recommended to render sprites from svg files.

Is there any support for Phaser for vector graphics artwork? I am unable to find any examples or documentation about this.

Hi Just starting with pixi (and canvas). Looking to create something similar to this ribbon effect on mobile http://beta.rallyinteractive.com/ Any advise, can this be done? any tutorials available? lack of experience in this means i'm struggling to break it down into smaller tasks, any advice. Thanks

Hey guys.. I'm hoping this is something I'm doing wrong, but basically.. when I'm creating a new SVG, it's having width, and height of 1 until 1 frame has passed and then it has actual dimensions. My guess is that the onTextureChange event is being triggered, however the new local transformation isn't happening until the next loop takes place. Here is an example of my code: var texture = PIXI.Texture.fromImage('mySVGPath.svg'); var sprite = new PIXI.Sprite(texture); console.log(sprite.width, sprite.height) // 1, 1 setTimeout(() => { console.log(sprite.width, sprite.height) // 500, 465 }, 0); Is there a way of solving this? Thanks!

Hello, I am a 2D traditional animator. I can provide you with raster(.PNG) and vector(.SVG) files. I charge $15/Hr and am available 6 days a week for work. Here is my portfolio. Contact: [email protected] Thanks for reading: -Dom

Hello, I don't know if this is a real good place de ask this, but i try I would like to create a geolocaliser in trains. For this, i have plans based on the country and type of the train and the wagon. I have all criterias here : http://rail.arukikata.com/ticket/seat/seat-tgvbru.pdf I was wondering what's the best practices to to this ? Should i transform my png or jpg into a SVG and then map it to a own 2D grid-map ? I'm new on this, so any advices/tips are more than welcome Thanks P.S : The only thing is that the core of the app is using AngularJS

Hi there, I like to introduce "Grain Defense" a HTML5 based tower defense game developed with Google GWT and a Vaadin Svg library. Play in browser: http://graindefense.trundicho.de Android App Store: https://play.google.com/store/apps/details?id=de.trundicho.graindefense I'm a developer. I was evaluating the google GWT 2.7 framework to see if it's worth to be used in browser business applications. Therefore I programmed my first game "Grain Defense". It's done in very little time. I'm not a designer so the graphics are quite easy. Because I love tower defense games I choose to code a tower defense game The game is coded in Java. GWT transforms the java code to HTML5 and javascript. So the output can be played in every browser and even with a wrapping app (about 10 lines of written code) that starts a browser on your phone you can play it on every android device. For simplicity I used a Vaadin library that supports a simplified interface for SVG graphics. So almost everything you see in the game is based on svg. Please feel free to play the game and to give feedback or ask questions about this technical approach. Greetings Trundicho

Hi everybody! Is it possible to render svg from pixie composition? I'm working on a project where I'll draw generative graphics and then I'll have to have them in some vector format because this will go to print. I would be happy to get svg or some other vector format. The reason I'm doing this with pixie is that I will later use that compositions as animations on a company website. If not can you suggest some other js library that could make that easy?

Almost 3 years ago, I told you in this same forum about the new game I had just put online: http://www.html5gamedevs.com/topic/366-esviji/ Today, I'm releasing the second major version of this game, with an interface even more adaptable to any screen size and ratio. You can still play on http://play.esviji.com/ To really see how responsive it is, you can try this URL in a desktop browser: http://play.esviji.com/wow/ Here is a screenshot: You need a browser modern enough, on mobile and desktop. Internet Explorer and Edge are the only modern browser not supported, because they don't have SMIL for SVG animations.

Hey, I was wondering if it's possible to use either CSS, Canvas, HTML or JavaScript to draw elements for a game (like blocks, characters, etc..) or would I have to use a pre-made image. If this has already been answered, please direct me to the proper thread/website. I'm self-taught so a lot of examples and "dumbing down" is greatly appreciated! Thanks again in advance.