aberrantmind Posted January 16, 2014 Share Posted January 16, 2014 so I do a lot of art stuff, and have been coding for about 9 months now. I'm just starting to dip my toes into vector art and was wondering if anyone has any experience with loading vector art into phaser? is that even a thing? edit: of course immediately after I hit post I find this post http://www.html5gamedevs.com/topic/2491-how-do-you-create-your-visuals/?hl=vector, edit2: but that post doesn't really answer my question now that I've read through the whole thing... COFFEE! Link to comment Share on other sites More sharing options...
Heppell08 Posted January 17, 2014 Share Posted January 17, 2014 I think deciding on what art could possibly be a personal choice. I use vector graphics and love it. I love animating in vector because there isn't much of the time consuming frame by frame paint in pixel art. But I love pixel games too so yeah, its all a choice really. Link to comment Share on other sites More sharing options...
aberrantmind Posted January 17, 2014 Author Share Posted January 17, 2014 sorry I think I was unclear in my op. I wasn't asking about personal preference(I have a good amount of xp with pixel art). What I was asking about was how to load vector art. I've been going through the docs, there are a couple of bitmap classes that I think is along those lines. I've been messing with inkscape and see I can save as svg or export bitmap data, so I'm guessing I have to load the exported data somehow but figured I'd see if I'm heading down the right path or not. Link to comment Share on other sites More sharing options...
Heppell08 Posted January 17, 2014 Share Posted January 17, 2014 Oh right, I don't use those file formats, just .png and also TexturePacker for creating the sheets and relevant JSON file if needed. The examples in the source files has all that you may need about loading certain image types in. Maybe some tutorials or similar posts on the forum too. aberrantmind 1 Link to comment Share on other sites More sharing options...
mwatt Posted January 17, 2014 Share Posted January 17, 2014 I'm going to hazard a guess that people who use vector art for their Phaser or like-engined games, design their images in vector graphics and then freeze that art as png files at two or perhaps three sizes. The idea would be to load in the correct size image for the current display resolution. This is pretty much what my partner and I am doing. If there is a better or different way, I'd like to hear about it. aberrantmind 1 Link to comment Share on other sites More sharing options...
spencerTL Posted January 17, 2014 Share Posted January 17, 2014 EaselJS (part of createJS) has SpriteSheetBuilder class which allows assets to be included as vectors and then compiled to an appropriate res png at run time. I wouldn't switch from Phaser for this but it would be a great addition to Phaser. aberrantmind 1 Link to comment Share on other sites More sharing options...
rich Posted January 17, 2014 Share Posted January 17, 2014 Basically as mwatt said - design in vector if you like, but at the end of the day canvas has to represent it as a bitmap if you want any kind of performance out of it. There are ways to parse vector data into canvas draw calls and draw it all on the fly - but doing so in a game? I'd rather roll in glass in my birthday suit. You could render them to hidden canvases at runtime (like EaselJS does) but the memory overhead, the rendering time, for no real benefit I guess it means you could have more elaborate looking animations, created in Flash, running in a game - but yet again probably only really useful for cut-scenes or intros, and definitely not optimal for WebGL. aberrantmind, Skeptron and victorysshadow 3 Link to comment Share on other sites More sharing options...
aberrantmind Posted January 17, 2014 Author Share Posted January 17, 2014 Ah I spent a good chunk of yesterday researching and experimenting and couldn't figure out any benefit to not just converting the images to png. Thanks for the answers everyone! Link to comment Share on other sites More sharing options...
Thepian Posted May 9, 2015 Share Posted May 9, 2015 No benefit. Not sure what you mean there, it is damn hard to figure out what dimensions to expect the game will be played in. Just for mobile phones there is a massive difference in resolution between different models. For symbols in my app, I will probably have to render at 12x and scale down by an integer number. And even knowing that it's tricky figuring out where to position and how to crop assets. Link to comment Share on other sites More sharing options...
rich Posted May 10, 2015 Share Posted May 10, 2015 No benefit. Not sure what you mean there, it is damn hard to figure out what dimensions to expect the game will be played in. Just for mobile phones there is a massive difference in resolution between different models. For symbols in my app, I will probably have to render at 12x and scale down by an integer number. And even knowing that it's tricky figuring out where to position and how to crop assets. True, but none of this negates the fact it's not easy or fast using complex vector images in Canvas, and near impossible in WebGL without rendering the data first. If you're building a truly vector art based game I would start experimenting with svg and forget all notions of using WebGL entirely. Link to comment Share on other sites More sharing options...
Recommended Posts