Importing Pixel Art



  • Does anyone know how to import pixel art into Hyperpad while keeping the intended size without it getting blurred to oblivion?


  • Admin

    When you import an image in HyperPad, the app will use that image as the retina version and automatically create a non retina version for you.

    So make sure your creating your graphics with the correct size in mind (2x normal).

    You can also link your project with Dropbox and import your own retina and non retina images by naming the retina (larger version) -hd. So it would be mygraphic-hd.png and mygraphic.png



  • @Murtaza This is incredibly annoying with pixel art though. If I want a 16*16 pixel graphic, it has to be scaled up 8x with nearest neighbour scaling, which a lot of apps don't have, so that results in them looking extremely blurry. It's also annoying when making a game from a bunch of assets like Super Marino World, since they each have to be up sized individually (unless there is a tool for this). It'd be really useful too have an option in the project settings for scale type.


  • Admin

    There is a toggle switch to ignore retina when importing. But you will get weird results on some devices.

    It's kind of confusing to wrap your head around retina images at first, but it's not that different.

    The iPad screen is 1024x768 points (not pixels). Although the retina iPad is 2084x1536 pixels, you don't actually get any extra screen space.
    This is because with retina devices, every 2 pixels is equal to 1 point. This means retina iPads and non retina iPads have things appearing the same size on the screen.

    So when creating graphics you need to create one at double the size for retina devices. If you want your 16x16 pixel graphic to look the same, you need a 32x32 graphic for retina devices.

    Basically, design for retina first, and things shouldn't be blurry. hyperPad does an ok job at scaling down. But you're right in some situations it may not be perfect. This is why we give you the option to import manually through dropbox. Often you can create more pixel perfect graphics in dedicated drawing apps.

    Hope this helps.



  • I'm guessing they are requesting something like the Godot engine's filter and mipmap options:

    http://docs.godotengine.org/en/stable/tutorials/asset_pipeline/managing_image_files.html


  • Admin

    @TutorialDoctor Ah, yes. I want to have something like this. A toggle to enable/disable Anti Aliasing I think is needed. We'll look into adding it :).



  • @Murtaza This would be really helpful considering that a lot of people use pixel are in their games. It funny how a feature that is supposed to make your images look better can screw you up so bad.
    It's not a huge issue to make your images bigger but if you plan to release the app to the app store, the smaller file size would be ideal.



  • @Murtaza we might be talking about different things. Pixel art is generally a lower resolution than the screen, so the image has to be upscaled to look good. For example, if I want a 32x32 image to be 1m wide, I have to scale it to 400% or something, but using hyperPad scale blurs it, so I have to import the graphics into a different app to resize using nearest neighbour scaling to avoid losing the sharpness of the pixels.


  • Admin

    @Jack8680 said in Importing Pixel Art:

    @Murtaza we might be talking about different things. Pixel art is generally a lower evolution than the screen, so the image has to be upscaled to look good. For example, if I want a 32x32 image to be 1m wide, I have to scale it to 400% or something, but using hyperPad scale blurs it, so I have to import the graphics into a different app to resize using nearest neighbour scaling to avoid losing the sharpness of the pixels.

    Scaling any image causes blurring. There is. I way around this. Doesn't matter if it's pixel are or not.

    If you want to create pixel art that will appear large on screen then draw them larger. Instead of using a single pixel brush, use a 4 pixel square brush.

    That being said if we gave the option of turning off anti aliasing, then you will notice slightly sharper images when dealing pixel art. regular graphics anti aliasing is a good thing.

    But really if you know you want it to take up more space on screen then the correct way is to draw it larger.



  • @Murtaza that's pretty much what I'm saying, it would be nice to not have to manually upscale the image to keep the pixels, especially when using a very large amount of assets like SMW. There is a way around it - using nearest neighbour scaling, although this wouldn't look nice on normal graphics, so it'd need to be an option if implemented. Pixel art is a bit of a niche game type, so I understand if you don't want to add an option just for that.


  • Admin

    @Jack8680
    I think giving the option to disable anti aliasing will solve the issue. It's not another type of scaling, instead it just removes any realtime processing to smooothen graphics.



  • @Murtaza oh, I thought anti aliasing was on top of some kind of interpolation used to scale graphics, if turning it off retains the pixel sharpness then that would be great.