Liberty BASIC Community Forum
« Any tips for fine looking sprites? »

Welcome Guest. Please Login or Register.
Jan 22nd, 2018, 5:44pm


Rules|Home|Help|Search|Recent Posts|Notification


« Previous Topic | Next Topic »
Pages: 1  Notify Send Topic Print
 thread  Author  Topic: Any tips for fine looking sprites?  (Read 152 times)
steliosm
New Member
Image


member is offline

Avatar




Homepage PM

Gender: Male
Posts: 9
xx Any tips for fine looking sprites?
« Thread started on: Jun 28th, 2017, 06:44am »

Hello all.

I have been trying to use available game assets for an application I'm creating. Most of those assets have the images available as PNG files, which I have to go through the process of resizing and exporting to BMP. What I have noticed is that the assets are not pixel perfect after this stage and when used in the application. I can see little black dots, especially around rounded corners. Also, since most of those images are anti-aliased I get 'funny' results when I have created the mask. SOme graphics have a shadow effect, which doesn't work as it should once loaded and displayed through liberty basic.

I'm using the code in the help file in order to create the mask for the images.

Any tips on how I can make the graphics look better? Should I look for specific type of assets?

Thank you,
Stelios
User IP Logged

Rod
Global Moderator
ImageImageImageImageImage


member is offline

Avatar

Graphics = goosebumps!


PM

Gender: Male
Posts: 5618
xx Re: Any tips for fine looking sprites?
« Reply #1 on: Jun 28th, 2017, 11:24am »

Well .png is lossless just like .bmp. So the problem is the choice of transparent background color. Black is first choice but can actually be more trouble than its worth. The funny results you see are black pixels rendered in the sprite image, the transparent background color,and they should not be there.

Often you see sprites with a cyan background, this allows black to be rendered in the sprite, if you want black.

It comes down to what you are rendering over, if it is a light, white, background then perhaps you don't want the blacks as they introduce too much shadow and sharpness, dark sprites work best with moody dark backgrounds.

But if your sprite image has black, absolute black, 0,0,0 , as a rendered colour you need to use a different background color. I never draw any sprite using absolute black, 1,1,1 is enough to differentiate the sprite from the background.

Anti-aliased can be problematic because it can Alias down to the background color and so "corrupt" your original sprite image.

Resizing is problematic because it spreads your pixel perfect graphics and "corrupts" the clean lines, usually using anti-aliasing to spread the image colors.

So unfortunately no quick fix. Keep black out of your original images, avoid resizing, try different transparent colors like cyan to show you where the problems are. You need a good paint package. At the end of the day its art.
User IP Logged

steliosm
New Member
Image


member is offline

Avatar




Homepage PM

Gender: Male
Posts: 9
xx Re: Any tips for fine looking sprites?
« Reply #2 on: Jun 29th, 2017, 03:39am »

The problem seems to getting worse after resizing the bitmap files and especially around the 'rounded' corners.
I think I have to go through another procedure to create my GUI pixel-perfect using a vector tool and then export the final sizes.
User IP Logged

Rod
Global Moderator
ImageImageImageImageImage


member is offline

Avatar

Graphics = goosebumps!


PM

Gender: Male
Posts: 5618
xx Re: Any tips for fine looking sprites?
« Reply #3 on: Jun 29th, 2017, 04:57am »

Have you tried leaving your sprites at their native size and using the spritescale command to enlarge them? Depends on the precision you require.
User IP Logged

steliosm
New Member
Image


member is offline

Avatar




Homepage PM

Gender: Male
Posts: 9
xx Re: Any tips for fine looking sprites?
« Reply #4 on: Jun 29th, 2017, 05:04am »

Yes, I did, but the result was even more ugly. It might have been the initial image been ugly in the first place.

I'm not using the sprites in order to animate them on the screen, just need to show information boxes for a puzzle-like game, but those boxes have rounded edges. The game screen background is not a solid color, in order to create images and just DRAWBMP. Is there any other way I can have rounded images without using sprites?
User IP Logged

Rod
Global Moderator
ImageImageImageImageImage


member is offline

Avatar

Graphics = goosebumps!


PM

Gender: Male
Posts: 5618
xx Re: Any tips for fine looking sprites?
« Reply #5 on: Jun 29th, 2017, 05:54am »

Yes there is, you can blit your bmp images using transparent blit. Start by browsing the blitter examples on lbpe, link is at the top of the forum.

You have a little bit of work to do but learning how to use the blitter is very worthwhile if you are messing with graphics and games.
User IP Logged

Rod
Global Moderator
ImageImageImageImageImage


member is offline

Avatar

Graphics = goosebumps!


PM

Gender: Male
Posts: 5618
xx Re: Any tips for fine looking sprites?
« Reply #6 on: Jun 29th, 2017, 05:57am »

You will also find a tutorial on transparent windows but the blitter is the best solution.
User IP Logged

steliosm
New Member
Image


member is offline

Avatar




Homepage PM

Gender: Male
Posts: 9
xx Re: Any tips for fine looking sprites?
« Reply #7 on: Jun 29th, 2017, 06:12am »

Great Rod, thank you for the info.
I will have a go with blit to see how this goes.
User IP Logged

Rod
Global Moderator
ImageImageImageImageImage


member is offline

Avatar

Graphics = goosebumps!


PM

Gender: Male
Posts: 5618
xx Re: Any tips for fine looking sprites?
« Reply #8 on: Jun 29th, 2017, 06:43am »

This isn't a great demo but it shows both techniques used together. I create a transparent window "gadget" and within that transparently blit the graphics. All this from a single graphics image used as a resource.

So what you desire can be done, shout out if you are puzzled.

http://gamebin.webs.com/Betty.zip
« Last Edit: Jun 29th, 2017, 06:46am by Rod » User IP Logged

steliosm
New Member
Image


member is offline

Avatar




Homepage PM

Gender: Male
Posts: 9
xx Re: Any tips for fine looking sprites?
« Reply #9 on: Jun 29th, 2017, 06:58am »

Just a heads up: site seems to be down at the moment smiley
User IP Logged

tsh73
Board Moderator

member is offline

Avatar

Anatoly (real name)


PM

Gender: Male
Posts: 1732
xx Re: Any tips for fine looking sprites?
« Reply #10 on: Jun 29th, 2017, 07:21am »

Quote:
site seems to be down at the moment

Works for me (just now)
EDIT Rod, it seems that DATA statements in the program are leftover from other vesrsion - never used?
« Last Edit: Jun 29th, 2017, 07:26am by tsh73 » User IP Logged

damned Dog in the Manger
Rod
Global Moderator
ImageImageImageImageImage


member is offline

Avatar

Graphics = goosebumps!


PM

Gender: Male
Posts: 5618
xx Re: Any tips for fine looking sprites?
« Reply #11 on: Jun 29th, 2017, 08:51am »

Quite right Anatoly, I was setting up a programmed dance routine but she is just throwing random moves in the demo.

Also I had the link wrong first time round and edited it to correct it. So try again.
« Last Edit: Jun 29th, 2017, 08:52am by Rod » User IP Logged

cundo
Guru
ImageImageImageImageImage


member is offline

Avatar




PM

Gender: Male
Posts: 630
xx Re: Any tips for fine looking sprites?
« Reply #12 on: Jun 29th, 2017, 10:14am »

About the resizing: You will get some anti aliasing effects when re sampling the image. You should try to resize using the lowest quality option.
In photoFiltre 7 go to image>Image Size...>in resampling choose "nearest" .
When using irfanView I think just selecting Resize instead of Resample does the trick: Image>Resize/Resample>Size method.
User IP Logged

cundo
Pages: 1  Notify Send Topic Print
« Previous Topic | Next Topic »

Rules|Home|Help|Search|Recent Posts|Notification

Donate $6.99 for 50,000 Ad-Free Pageviews!

| |

This forum powered for FREE by Conforums ©
Sign up for your own Free Message Board today!
Terms of Service | Privacy Policy | Conforums Support | Parental Controls