how to get art from Kenney.nl to look right?

dylanbelldylanbell Member Posts: 18

I got some art assets from Kenney.nl and they look great until I put them in gamesalad. What do I need to do to get them to look right? They're vector graphics if it matters

Comments

  • AlchimiaStudiosAlchimiaStudios Member Posts: 1,069
    edited June 2016

    Gamesalad doesn't support vector formats. But the nice thing about vector graphics is that they can be exported as raster graphics at any size. Most likely you just need to export them at a higher resolution. The resolution you would want to export them at depends on the platforms that you are tying to publish to (not the only factor, but the most important in deciding resolution.)

    Follow us: Twitter - Website

  • tatiangtatiang Member, Sous Chef, PRO, Senior Sous-Chef Posts: 11,949

    @dylanbell said:
    They're vector graphics if it matters

    It matters. Try importing them as png formatted graphic files.

    New to GameSalad? (FAQs)   |   Tutorials   |   Templates   |   Greenleaf Games   |   Educator & Certified GameSalad User

  • ArmellineArmelline Member, PRO Posts: 5,365

    Remember also that the pngs that Kenney includes in a lot of his image sets are very low resolution. Much too low resolution to use in GameSalad (unless your actors are really really small). You'll need to resize them in Illustrator and then export them as higher resolution pngs files.

  • dylanbelldylanbell Member Posts: 18

    Thanks to everyone.

    @AlchimiaStudios said:
    But the nice thing about vector graphics is that they can be exported as raster graphics at any size. Most likely you just need to export them at a higher resolution. The resolution you would want to export them at depends on the platforms that you are tying to publish to (not the only factor, but the most important in deciding resolution.)

    I'm publishing to Android & iOS what resolution would I want for that?. Also, how would I go about taking the Kenney assets and exporting them as raster graphics? And could I do it with Inkscape?

    Sorry, I have a good understanding on how to make the games. But I'm a complete noob to the art side of it.

  • AlchimiaStudiosAlchimiaStudios Member Posts: 1,069
    edited June 2016

    @dylanbell said:
    Thanks to everyone.

    @AlchimiaStudios said:
    But the nice thing about vector graphics is that they can be exported as raster graphics at any size. Most likely you just need to export them at a higher resolution. The resolution you would want to export them at depends on the platforms that you are tying to publish to (not the only factor, but the most important in deciding resolution.)

    I'm publishing to Android & iOS what resolution would I want for that?. Also, how would I go about taking the Kenney assets and exporting them as raster graphics? And could I do it with Inkscape?

    Sorry, I have a good understanding on how to make the games. But I'm a complete noob to the art side of it.

    Yes as @tatiang said you'll want to make them .png file format. Inkscape should have the ability to export in that format but I'm not sure on the actual menus you'd need to click on to do that in Inkscape, as I don't use that software.

    Generally for iOS you'd want them at 2x the intended display resolution for high fidelty.

    You also would want them to fall close to standardized texture resolutions, the cookbook has a section on this here:

    Images and Sounds

    To break it down to the basics:

    • Images should be the same size or exactly double of the actor you intend to use ( 2x images of intended actor size if planned for retina devices, which is pretty much standard now)

    • Images should be divisible by 2

    • Always 72 dpi, png preferred format.

    It's also worth looking into making your project universal:

    @Armelline has a guide on this here

    Or the entries here and here

    As this is fundemental to making it work on multiple platforms.

    Follow us: Twitter - Website

  • SocksSocks London, UK.Member Posts: 12,822

    @AlchimiaStudios said:

    • Images should be divisible by 2

    That should be divisible by 4 for Retina projects.

  • AlchimiaStudiosAlchimiaStudios Member Posts: 1,069

    @Socks said:

    @AlchimiaStudios said:

    • Images should be divisible by 2

    That should be divisible by 4 for Retina projects.

    Ah yep, knew I forgot something.

    Follow us: Twitter - Website

  • SocksSocks London, UK.Member Posts: 12,822

    @AlchimiaStudios said:

    @Socks said:

    @AlchimiaStudios said:

    • Images should be divisible by 2

    That should be divisible by 4 for Retina projects.

    Ah yep, knew I forgot something.

    :smile:

    . . . . or divisible by 3 if it's an iPhone6+ project.

  • dylanbelldylanbell Member Posts: 18

    @Socks so what you have to make game multiple times for different devices? Thought the whole point was to make it once and it work for all?

  • SocksSocks London, UK.Member Posts: 12,822

    @dylanbell said:
    @Socks so what you have to make game multiple times for different devices?

    I've not said that.

    @dylanbell said:
    Thought the whole point was to make it once and it work for all?

    The whole point of what, vector graphics ?

  • dylanbelldylanbell Member Posts: 18

    @Socks no gamesalad. Sorry I've got off topic. Gamesalad advertises "make your game once and publish it to any platform" but people are saying you have to do things differently for whatever platform you're publishing to. What if I want my game to be available for android, iPhone, iPod and iPad?

  • SocksSocks London, UK.Member Posts: 12,822
    edited June 2016

    @dylanbell said:
    @Socks no gamesalad. Sorry I've got off topic. Gamesalad advertises "make your game once and publish it to any platform" but people are saying you have to do things differently for whatever platform you're publishing to.

    What - specifically - have these people said ?

    @dylanbell said:
    What if I want my game to be available for android, iPhone, iPod and iPad?

    I struggle with questions that allude to something unsaid (genuinely, I'm awful at interpreting conversations where people aren't specific), so it's probably best if someone else answers this question.

  • AlchimiaStudiosAlchimiaStudios Member Posts: 1,069
    edited June 2016

    The guides I posted at the end of my first post cover universal builds (this is what you are talking about ultimately when you say android, iphone, ipad, etc in one project). As far as assets go, really you can import them at any size, but the higher resolution the screen is, the higher resolution you'd want your assets at. There isn't any set in stone asset size. Just guidelines.

    Ideally you'd want to start with either a project targeted at iphone 6+ or a project targeted at iPad, use assets at 2x or 3x intended actor size, and then use the methods above for making it adjust to any screen resolution with either the stretch or overscan options.

    I personally use my own version of stretch adjustment with the project started for iPad at 2x actor size for asset resolution, with some assets being a bit lower for memory savings/fitting in the standardized texture sizes.

    It seems very confusing at first, but once you implement it and see how it reacts, you'll see Gamesalad is actually pretty good at making a project work "universally".

    Follow us: Twitter - Website

  • SocksSocks London, UK.Member Posts: 12,822

    @AlchimiaStudios said:
    I personally use my own version of stretch adjustment with the project started for iPad at 2x actor size for asset resolution, with some assets being a bit lower for memory savings/fitting in the standardized texture sizes.

    Yep, this is my general approach too.

  • dylanbelldylanbell Member Posts: 18

    @AlchimiaStudios said:
    The guides I posted at the end of my first post cover universal builds (this is what you are talking about ultimately when you say android, iphone, ipad, etc in one project). As far as assets go, really you can import them at any size, but the higher resolution the screen is, the higher resolution you'd want your assets at. There isn't any set in stone asset size. Just guidelines.

    Ideally you'd want to start with either a project targeted at iphone 6+ or a project targeted at iPad, use assets at 2x or 3x intended actor size, and then use the methods above for making it adjust to any screen resolution with either the stretch or overscan options.

    I personally use my own version of stretch adjustment with the project started for iPad at 2x actor size for asset resolution, with some assets being a bit lower for memory savings/fitting in the standardized texture sizes.

    It seems very confusing at first, but once you implement it and see how it reacts, you'll see Gamesalad is actually pretty good at making a project work "universally".

    Ok I think I'm starting to get it. So say I make my project on the iPhone 6+ landscape in GS. For an actor that's say 40 by 40 pixels I'd want the image or asset to be 80 by 80 pixels when I import it to GS?

  • SocksSocks London, UK.Member Posts: 12,822

    @dylanbell said:
    Ok I think I'm starting to get it. So say I make my project on the iPhone 6+ landscape in GS. For an actor that's say 40 by 40 pixels I'd want the image or asset to be 80 by 80 pixels when I import it to GS?

    The iPhone 6+ is the odd man out in the Apple line up, it requires x3 assets, so a 40 x 40 px actor would - ideally - have a 120 x 120 px image asset.

  • dylanbelldylanbell Member Posts: 18

    @Socks thank you man! Now another thing what does everyone mean when they say something needs to be dividable by 4?

  • SocksSocks London, UK.Member Posts: 12,822

    @dylanbell said:
    @Socks thank you man! Now another thing what does everyone mean when they say something needs to be dividable by 4?

    Divisible by 4 simply means you can divide something by 4 and end up with a whole number value.

  • dylanbelldylanbell Member Posts: 18

    @Socks I know that lol I went to 2nd grade. I just dont know what people are talking about when they say that on here? Are they saying the width and height of an asset in pixels should be divisible by 4 or 2? Or are they talking about something else

  • dylanbelldylanbell Member Posts: 18

    @Socks I just reread what I said earlier and if "I know that lol I went to 2nd grade" comes off as rude to you, I didn't mean for it to. Just meant it as a joke and worded it wrong.

  • SocksSocks London, UK.Member Posts: 12,822
    edited July 2016

    @dylanbell said:
    @Socks I know that lol I went to 2nd grade.

    :) :p

    @dylanbell said:
    I just dont know what people are talking about when they say that on here?

    Divisible by 4 means the same thing here as it does anywhere else, simply that you can divide something evenly into 4, using whole number values.

    @dylanbell said:
    Are they saying the width and height of an asset in pixels should be divisible by 4 or 2?

    Divisible by 4.

    @dylanbell said:
    Or are they talking about something else

    No, they are defintely saying image assets should ideally be divisible by 4.

    This is just a recomendation (for optimal image quality), if your image is not divisible by 4 nothing is going to break or not work, it simply means a pixel in your image may sit on a sub pixel position, sub pixel positions don't exist on physical screens, the device will therefore average the vales of the pixel across adjacent (physical screen) pixels, resulting in a slight softening of the image.

    This is less of an issue with Retina screens, it was a more noticeable issue pre-Retina.

    This issue is almost imperceivable on small pixel dense screens (iPhones).

    The issue can be pretty much ignored on the iPhone6+ as the project is downsampled in hardware anyway, so all your pixel alignment perfection is for nothing.

    This issue can be somewhat ignored if your actor is moving, rotating, changing size (anything other than static). Most games - of course - consist of moving images.

    This issue can be somewhat ignored if your image is photographic or illustrative, it primarily effects hard edged graphic images.

    So . . . a 64x64 pixel asteroid image flying across the screen at 200pps, whilst spinning and bouncing around, isn't going to look any sharper or higher quality than a 63x63 pixel asteroid image applied to the same 64x64 asteroid actor, in fact I doubt using a 50x50 pixel would make any difference either, the goal of divisible by 4 is to get the pixels in your image to sit on the pixels on a physical screen and not in between them, but with a moving object the aim is the opposite, to have the image constantly shifting from pixel to pixel - and crucially - through sub pixel positions (for smooth movement) . . . . whereas a score count, onscreen button or logo, which isn't moving, would benefit more from being divisible by 4.

    Ultimately it's what looks good, it's not really a technical issue, more of an aesthetic issue, test your project on a decive, if it looks good to you, it is good, I've even got image assets where I initially threw them together quickly to no particular size, then later on I decide to neaten them up, so for example I made my 125x125 pixel image 128x128 pixels, but then decided I preferred the orginal 125x125 version as it wasn't as sharp/hard edged as the more 'perfect' 128x128 pixel version . . . so, throw it all on a device and see what works for your project.

  • dylanbelldylanbell Member Posts: 18

    @Socks thanks alot man! This community is amazing!

Sign In or Register to comment.