Search the Community

Showing results for tags 'svg'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 33 results

  1. 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?
  2. 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 : 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 !;)
  3. Has anyone successfully loaded an SVG file on IE11? Even the Phaser 3 SVG example crashes on IE11.
  4. 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?
  5. 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
  6. 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!
  7. 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.
  8. 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="" xmlns:xlink="" xmlns:html="" 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=""> <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="">Bubbles sound effect</a> recorded by Mike Koenig (<a xlink:href="">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
  9. 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, 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 - 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.
  10. 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!
  11. Hey guys if it's possible / recommended to render sprites from svg files.
  12. puzzler

    SVG support?

    Is there any support for Phaser for vector graphics artwork? I am unable to find any examples or documentation about this.
  13. Hi Just starting with pixi (and canvas). Looking to create something similar to this ribbon effect on mobile 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
  14. 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!
  15. 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: Thanks for reading: -Dom
  16. tleberre

    Create a 2D Map

    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 : 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
  17. 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: Android App Store: 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
  18. 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?
  19. Almost 3 years ago, I told you in this same forum about the new game I had just put online: 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 To really see how responsive it is, you can try this URL in a desktop browser: 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.
  20. Dear community I would like to announce new source of free vector (SVG) art it is oriented mostly on quality 2D art for games. All vectors are free and unique - painted by scalablegfx community.
  21. 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.
  22. Ed8dd

    Get Sledging We created a little game as a christmas card for our clients Hope you like it
  23. Hi there, I already told you about my HTML/SVG game called esviji a while ago in the Game Shocase threads. This first verson works pretty well, but it's only a pet project I developed on my spare time (not a lot), and the JavaScript source code is pretty ugly IMHO. I would like to start working on a second version that would be much better, and try to stop reinventing the wheel. The issue I'm facing is that almost all HTML5 game developement frameworks are closely tied to Canvas, which most games use indeed. But I don't use Canvas at all. My v1 game interface was almost only one single SVG element with sub-elements shown or hidden according to game states/screens (welcome screen, playing, pause, scores, settings, etc.). The v2 interface I'm currently working on mixes plain HTML for most screens, and only the SVG for the "active" part of the game (board and balls). I did this because I want it to be truely responsive, working as well on portrait and landscape, on any device ratio, from 9/16 to 16/9 at least but even more "extreme". So, I'm looking for a framework, or at least a code template/boilerplate, that would help me create a better JavaScript architecture, including: modularitygame states/screensgame loopetc. Any advice or comment?
  24. esviji is a variation around the famous Puzzle Bobble game —a.k.a. Bust-a-Move—, in which you have to destroy balls and gain points as long as you can! esviji is an HTML5 game built not with canvas as most other HTML5 games, but with SVG instead. The name is of course a word game on "S.V.G.". As mentioned earlier in a thread about resolution-independent games, SVG is limited by bad browsers implementations (only Firefox provides almost all of SVG standards), and of course by it's vectorial nature. But being vectorial means you'll have nothing to do for scaling your game on any device size. It works everywhere with latest releases of Firefox (desktop, Android, Firefox OS), Safari desktop and mobile, Chrome desktop (issues with Chrome Android), etc. You can of course play esviji online: It is even in the Firefox Marketplace, so you can install it like a native app on Firefox OS, Firefox for Android and Mac OS (didn't test on Windows / Linux yet): esviji is open source, under MIT licence, feel free to fork it on Github, make pull requests and open issues for bugs and improvement ideas.
  25. Has anyone already tried to make pixelated graphics from a scalable vector (svg) source? I use Inkscape, and I think working with scalable vectors in inkscape is easier than pushing pixels on a raster graphics editor like gimp, because vectors are more easily reusable and easier to change. However, Inkscape always does anti-aliasing when scaling down, which makes art intended to be pixelated look real bad when exported to png (I don't know about Corel Drawn or Adobe Illustrator, I have never used them). I made a bash script (shell script, if you prefer), which I'm attaching to this thread, that uses inkscape to convert an svg file to a scaled up png, and then scale it down with image magick. The result looks better than the file exported directly in low resolution from inkscape, and is easy to fix the remaining issues with gimp (unfortunately, I couldn't get rid of it yet). I have attached also an example svg, with a comparison of what inkscape usually spits out (1), what image spits out when downscaling an upscaled exported image (2) and a fixed up version (3). I have put also the scaled up png. Using this process to achieve the desired result (making pixel art out of vector graphics) is one option, but certainly it is not an optimal process, nor very practical (you should run the script and make the manual fixes every time you change your svg). Does any one know of a better process, that does not involve don't using scalable vectors? Maybe there is an inkscape extension of some sort that exports the png without doing anti-aliasing. Inkscape 0.91 (the upcoming release) will be completely replacing libnr (it's current render engine, developed by themselves) for libcairo (a much more mature and widely used renderer), and it seems cairo allows to disable anti-aliasing when up/down scaling things. But I don't know if inkscape itself will allow to turn anti-aliasing on/off when exporting to png. I remember that, on Windows XP, MS Paint used to let you create curved lines which where not anti-aliased. First you traced the straight line, then you curved it (and after it became normal graphics, which could be edited only like normal raster graphics). I think a vector graphics editor that could display and export graphics in that pixelated way would be very useful in some scenarios. If anyone wants to try my script, just unzip it, and run some_svg_file.svg; Unfortunately, it will run on linux only (or maybe on OS X and BSDs also). EDIT: The image is intended to be a 16x16px mushroom, like a super mario mushroom.