Graphics for a C64 game

[saimo]

OK, so I'm working on this game for the C64:



Now I have decided to make the top part more interesting by means of a HIRES bitmap. Easier said than done, given that I'm no artist. Much easier.


The first thing that came to mind was adding clouds. Although I knew right from the start that a pseudo-realistic approach was not going to work, I tried anyway because I felt it was going to be funnier to do. Eventually, although I'm quite satisfied with the clouds themselves, the whole doesn't quite work, as I suspected:




So, I switched to cartoonish/childish clouds - and I was so uninspired that they ended up looking rather... well, bad. I guess I'll have to simplify and make them even more stylized.




Still, those clouds were good enough to get a first idea of where I was heading to. The next problem was making the sky less dull, so I thought of adding more hues. Due to the technical restrictions, the only solution I could come up with was the usual gradient stuff. And, at that point, another problem arose: which ramp to use? These are the best ones I could find, with the bottommost one being the one I prefer:




Techical restrictions aside, my biggest problem is that I can't even imagine an "artistic" sky. I tried to look at photos, but they aren't a good reference. I guess I'd better look at pixelled references (don't ask me why I haven't done it already - I don't know ).
Well, in the meanwhile, any ideas?

[ptoing]

To be honest, I would probably ditch the sty as well as the sun (in case it is not needed for something). The newest one you have there is just way too busy, I assume the player will go up there and be infront of all the busy stuff going on?

Also the gradient skye stuff does not look nice either. No need to emulate Amiga copperpuke skies.

Otherwise this looks quite cute I have to say.

[saimo]

To be honest, I would probably ditch the sty as well as the sun (in case it is not needed for something).

No, the sun isn't needed for anything: I just left it there for some cuteness. Indeed, I had already considered removing it to have more freedom with sky hues, but first I wanted to see how far I could go with it. Maybe it will go.
As for the whole sky, OK, I can remove it, but how can I fill that space, then?

BTW: forgot to say that the 4th row of characters (so, the 8-pixel band between the clouds and the topmost platforms) can only be painted in solid color.

The newest one you have there is just way too busy, I assume the player will go up there and be infront of all the busy stuff going on?

Yes, but it won't be a problem thanks to the outlines of "active" objects - if you want to try an earlier version for a better idea, get it from CSDb.

Also the gradient skye stuff does not look nice either. No need to emulate Amiga copperpuke skies.

Well, I didn't mean to mimic Amiga stuff - it's just that I couldn't figure out a way to fill the emptyness. I guess the problem is in dealing with clouds and sky background separately at conceptual level.

Otherwise this looks quite cute I have to say.

 

[ptoing]

Made an edit.



I would keep the sky and clouds very simple to stay in style with the rest.
The highlights on the top of the platforms is something I would do because it increases the visual separation of the platforms and makes them pop out a bit more.
You lose a bit of detail in the top row as you can make no dents, but I think it's a good tradeoff.

[saimo]

Thanks for the edit, ptoing!

I would keep the sky and clouds very simple to stay in style with the rest.

Yes, definitely the right direction. This is exactly what I meant when I said I'd have to simplify and stylize the clouds.
I'll try to draw something just a little more elaborate to achive a slightly less bare look (and I'll probably keep the sun).

The highlights on the top of the platforms is something I would do because it increases the visual separation of the platforms and makes them pop out a bit more.
You lose a bit of detail in the top row as you can make no dents, but I think it's a good tradeoff.

The highlights are nice, but unfortunately they can't be used because there are no colors left. The part below the sky is HIRES Extended Background Color Mode, so, while I can choose freely the foreground color (which is used to paint the platforms), I have only 4 background colors, which are already used for the dents (brown, dark blue and dark gray) and the outlines (black).
I need such mode for performance (the platforms are generated procedurally) and memory reasons.

[ptoing]

Ah, fair enough, did not know you used ECM for this, but I guess full blown hires bitmap would be a tad slow.

EDIT:



This would work: black, yellow, dark brown and dark blue as bg colours and some tweaks to the platforms, like getting rid of the grey ones and such. This way you could have the highlights and the dents

I take it the clouds are sprites, or at least partially?

EDIT2:

Also, what is it with lots of demosceners and "filling out empty space", seriously give it some room to breathe.

[saimo]

Ah, fair enough, did not know you used ECM for this, but I guess full blown hires bitmap would be a tad slow.

Yeah.

This would work: black, yellow, dark brown and dark blue as bg colours and some tweaks to the platforms, like getting rid of the grey ones and such. This way you could have the highlights and the dents

This edit is nice as well, but... mmm... I guess the tradeoff becomes too much now. I appreciate your input, but I think I'll stick to the basic platforms. Maybe in future I'll enrich them with the characters that get freed thanks to the new top (more below).

I take it the clouds are sprites, or at least partially?

No, the top part is meant to be fully HIRES: I'll just switch VIC mode between the clouds and the topmost platform.
Back to what I was saying above, the publicly available version is entirely ECM, so the HUD takes quite a number of characters. But once the HIRES sky is in place, I'll move the bar to the bottom and thus save the characters used for the pig silhoutte.


Here are the revised clouds:



Good? Bad?


EDIT:

Also, what is it with lots of demosceners and "filling out empty space", seriously give it some room to breathe.

Dunno if it's a demoscene trend or anything, it's just that such an empty sky looked too dull to me


EDIT 2:

[Infinite Segment]

The new sky looks nice (maybe a bit too straight), but I agree with ptoing, the sky is a bit too busy and is drawing attention away from the playing area. The highlights he added actually help prevent that by making the platforms pop out more, drawing your eye down again. (And of course his sky is less busy, partly because of the muted clouds [though they don't look very nice] and partly because of the lack of sun.)

[saimo]

The new sky looks nice (maybe a bit too straight),

Indeed, I should break those horizontal lines more. Here's an attempt (which also tries to re-arrange the clouds in a more effective way):



(I just noticed one thing that bothers me: the similarity of the left "nose" of the clouds. I guess I'll change that of the clouds closer to the sun).

but I agree with ptoing, the sky is a bit too busy and is drawing attention away from the playing area. The highlights he added actually help prevent that by making the platforms pop out more, drawing your eye down again. (And of course his sky is less busy, partly because of the muted clouds [though they don't look very nice] and partly because of the lack of sun.)

Yes, the highlights would help in that sense, but they come at a cost, and the result is that neither the highlights nor the platform look perfectly nice.
But, no worries: as said above, the outlines attract a lot the attention, not to mention the fact that the objects (which the player has to catch) move, whereas the rest is static. (An additional word for the sun: it doesn't contrast highly with the sky and, as it can be seen by trying the playable preview, it isn't much of a problem - or a problem at all ).

[ptoing]

I am wondering, how much processing power would it cost to open the upper border, make it skycolour and they the sun and some clouds as sprites up there?
To give the whole thing more space to breathe. That way you could perhaps even make the clouds move.

[saimo]

Last time I touch the clouds today (and hopefully forever, otherwise I'll end up overdoing it):

I am wondering, how much processing power would it cost to open the upper border, make it skycolour and they the sun and some clouds as sprites up there?

Do you mean something like this?



It surely would be nice, but not an option because, at each rasterline, it would be necessary to change the border color where the sky begins and then where it ends, which means either wasting lots of CPU cycles or writing complex code to do something (little) else while the sky gets drawn on the monitor. But the real showstopper here is the fact that I'm using BASIC, so I can't even synchronize properly.
Nice idea, though

To give the whole thing more space to breathe. That way you could perhaps even make the clouds move.

Now that would really attract the eye. But, that aside, a lot of memory for the sprites and some CPU power would be needed, and I need both for a few gameplay things that still need to be added (Scrolling is no go as well, because there just ain't enough CPU power.)

[ptoing]

I see.

Why the hell are you doing this in BASIC? 

[PypeBros]

IIrc, you could quite easily have your raster effect coded in 6502 assembly and keep the rest of the game logic in BASIC. That will be a mere matter of POKEing some opcodes at some location (both an interrupt handler and a handler installer), then SYS at that location and voilà : the IRQ handler is installed and will run in background while the BASIC interpreter happily runs the game in the foreground.

[saimo]

Why the hell are you doing this in BASIC?  

Long story made (really) short...
The more time passes by, the more I wish I had a simple machine to play around with, hitting directly its hardware. The C64 is a machine I love and, unfortunately, know too little about, so, at some point, I decided to have some fun fiddling with it. I had even a clear idea in mind: I wanted coloured HIRES sprites. I knew BASIC would be enough for that, so I chose it to get immediately started. I ended up doing much more: I created a custom framework that allows pushing BASIC to wild limits (thanks also to the BOSS-BASIC compiler) and that provides a large and comfortable library of functions of all kinds. Then, during one of those nights of brainstorming (which actually started with the focus on that other game I told you about privately a while ago), I had the crazy idea the game is based on and so I started working on it knowing it would be feasible. Eventually, the fun became a (pleasant) challenge: to create a colorful, 100% HIRES game using just BASIC.

[saimo]

IIrc, you could quite easily have your raster effect coded in 6502 assembly and keep the rest of the game logic in BASIC. That will be a mere matter of POKEing some opcodes at some location (both an interrupt handler and a handler installer), then SYS at that location and voilà : the IRQ handler is installed and will run in background while the BASIC interpreter happily runs the game in the foreground.

Yes, sure*, but my objective is writing everything in BASIC

*EDIT 2: actually, even in assembly, things wouldn't be that straightforward: while it is easy to synchronize vertically, it isn't horizontally).

EDIT: I must admit that the code is already polluted, though: the music has been created with GoatTracker and thus the replay routine is in machine language - believe it or not, although I had no choice, this brought a tear to my eye when I added music

[saimo]

Update: I made a few minor changes to the clouds (accentuated a few curls) and implemented the code - actual screenshot:



(The jerks are due to the time that passes between the instructions poke53272,gp : poke53265,91, where the first changes the video memory location and the second the video mode. I've already managed to hide them by making them occur during the horizontal blanking, but the solution isn't 100% stable, so there's still work to do. EDIT: fixed, now.)

I've also been thinking about highlights...

The first solution that came to mind was to turn the dents into bumps and thus use the 3 background colors for both them and the highlights; yet, this idea didn't convince me at all.

The second solution was to just turn the dents by 180° so that they'd show the bright side, which could be painted in the highlight colors: however, a quick mockup (which I trashed, sorry) didn't manage to convince me.

The third solution came from an old idea that actually got implemented in the first stages of development:



It surely makes things more interesting, but for some reason the slanted top side doesn't really seem suitable to me (and it also costs the loss of gray as shadow color). What do you say?

EDIT: alternative (and better) highlights:



#1 requires only 1 character, the others need 3 characters and more processing time (but those are hardly problems). I can't really decide, probably the best - as it often happens - is in the middle

Also, I've been considering (not for the first time) to remove the outlines, but they are too important both for the cartoonish feel and the clear separation of the platforms.
A final thing to note is that I have now 13 characters free (courtesy of the bitmap top): maybe they could be used to improve the platforms (f.ex., they could be used to add dents also to the slanted sides)...

EDIT 2:

Just tried a different approach:



The problem is that I can't figure out how to enrich the platforms with the 4 colors used for highlights and outlines (white, the two lighter grays and black)

EDIT 3:

Some more ideas:



Only the first looks acceptable to me, but I don't know if I'll go for it as the highlights make the platforms seem too smooth (and there's also the loss of gray for dents that bothers me). Ah, please ignore the bottom-right one: it isn't tecnically possible (that's what happens when one doesn't sleep enough)

[STE 86]

if you want inspiration for clouds on the c64 got to CSDB and have a look at the entries for Jim Sachs and Wayne Schmidt.

if you want cutesy game clouds then have a look at games like Nobby the Aardvark and Mayhem in Monsterland on Lemon64.

Steve

[saimo]

Thanks for the pointers, STE 86.
Yes, I was after cutesy clouds. Those appearing in the games you mentioned would be suitable, but now I'm quite happy with the last ones I posted - they're less plain and still cartoonish enough. Do you think they're not good, perhaps?
At the moment I'm trying to find a way to make platforms more interesting, but all the solutions I came up with don't really satisfy me

[saimo]

I tried hard to find a way to add highlights, to make the platforms prettier and, at the same time, not to lose on the color side. I even tried weird things like this:



but, eventually, I settled with the simple highlighting solution indicated in a previous post (actual screenshot):



While at it, I retouched again a couple of clouds slightly.

What do you say? Time to move on?

[ptoing]

Looks good enough.

One nitpick: I would not have the biggest dents anywhere at the corners where they touch the outlines ond the dark side on the right - looks odd.

[saimo]

One nitpick: I would not have the biggest dents anywhere at the corners where they touch the outlines ond the dark side on the right - looks odd.

Indeed it would be preferable to avoid that, but, on the other hand, it isn't terrible (I hope... or have I just grown used?).
The two solutions would be:
 * drawing the dents so that such problem never happens, which means restricting the size to 7x7, thus making the dents more similar to others - not good;
 * adding special checks in the code: easy and not much demanding computing-wise, but implicitly tied to the aspect of graphics, which is something I'd rather avoid at this stage since I'm not really sure the dents will stay forever.
But I'll keep in mind that people might be bothered and I'll re-evaluate the problem when the right time comes

Now I'll have to think of some animation for when the food is caught... sparking stars or something...

[Rydin]

Perpectively-speaking, it's feels like we can see the left side, front side, and right side all at once.
A potential solution is to think of each platform as its own three-dimensional object, facing at all sorts of different angles.  But never should we see two adjacent sides of the same object (because when in nature can you see both the front and back side of something?)

[saimo]

Perpectively-speaking, it's feels like we can see the left side, front side, and right side all at once.
A potential solution is to think of each platform as its own three-dimensional object, facing at all sorts of different angles.  But never should we see two adjacent sides of the same object (because when in nature can you see both the front and back side of something?)

Probably you're puzzled because you're thinking of the platforms as perfects parallelepipeds, but that's not what they're meant to be in the game - here's a possible interpretation seen from above:

[havocplague]

I might be missing something here, but isn't a hires-sprite two colors, one (transparent) background color, and one solid? I guess I'm just curious to see how you plan on doing the sprites in more than two colors?

[STE 86]

well, what you have to do is referred to as "hi res sprite overlay" which basically means you overlay 2 or more hires sprites to create a composite multicolour one.

if you do straight hires then u need 1 sprite per colour OR you can use 1 multicolour sprite with 3 colours and then overlay 1 hires sprite black outline to "clean up" its blocky edges.

either way its do-able given the assumption you have only you and 1 or 2 nasties on the same level.

HOWEVER, this method requires raster interrupts for graphic changes and i cant see that happening in basic. plus contending with the sprite MSB point after 256 pixels across is definitely not for the novice coder.

Steve

[saimo]

@ havocplague and STE 86

well, what you have to do is referred to as "hi res sprite overlay" which basically means you overlay 2 or more hires sprites to create a composite multicolour one.

Yes, correct.

if you do straight hires then u need 1 sprite per colour OR you can use 1 multicolour sprite with 3 colours and then overlay 1 hires sprite black outline to "clean up" its blocky edges.

This is correct, but not the only possibility. One can mix any number of sprites (up to 8, of course) in any mode at will.

HOWEVER, this method requires raster interrupts for graphic changes and i cant see that happening in basic.

What is strictly needed is synchronizing with the raster beam, and BASIC does allow to achieve basic (horrible pun ) effects. With a compiler, then, possibilities expand a lot.

Anyway, the game already runs and it has been doing so for 1.5+ years
You can already download an old preview from CSDb, but this weekend a much better version (which includes the changes discussed in this thread) is going to be released at the X·2010 and on monday I'll upload it to CSDb, so stay tuned...

[Cow]

I know the rightmost cloud is supposed to be overlapping but it looks like it's wedging unnaturally into the other cloud form. That's the only thing throwing me off, looks good otherwise.

[saimo]

I know the rightmost cloud is supposed to be overlapping but it looks like it's wedging unnaturally into the other cloud form. That's the only thing throwing me off, looks good otherwise.

Yes, that's a weak point. I had tried to give a sense of depth by means of dithering, but the result did look quite consistent with the fact that the sun is behind the clouds. Although I'm by no means after a realistic lighting - the platforms' is all but realistic and consistent - having such a blatant issue in such a restricted space seemed too much, so I chose to just use shapes. I'll see what I can do and post the result here (but first I have to solve a synchronization issue in the code: for a certain feature I want to add, I have changed the way the video modes are handled to have more freedom with the top graphics, but this is again causing jerks... maybe I'm close to the solution, but I don't know for sure).

EDIT: issue fixed, so back to pushing pixels...
I tried a few quick things to tackle the issue of badly overlapping clouds (note: not all of them comply with the video mode restrictions, so they're just meant to give an idea of the possible solutions):



I think the last one is quite alright and I'll go for it unless somebody has a better suggestion.

Also, let me anticipate that now that the new video mode handling is in place I can start pixelling skies depicting dawn, sunset and night as well...

[saimo]

Just tried something for the sky at dawn...



I'm not sure it's any good, but I'll see if I can use it as a base to get anywhere... otherwise, I guess I'll have to change the concept radically.

EDIT: more experimentation...



EDIT 2: even more...



EDIT 3: more fiddling...



(The 24th line from the top is where the mode switch happens: to avoid jerks, I force the color to be the same of that behind the platforms, so that line hasn't to be considered when it comes  to HIRES restrictions.)

EDIT 4: final tries for today:



I think I'll go for the very last one: it's simple, it's consistent with the style of the noon sky and, hopefully, catches the hues of dawn...

[saimo]

Latest attempt at dawn sky and first attempts at sunset sky...



EDIT: yet another dawn sky plus several color tests for the sunset sky:



I can't really choose the hues for the clouds. A couple of combinations look better to me, but still I'm not 100% sure
Also, should I add another cloud at the right to fill that space?

[saimo]

Eventually I went for a simpler solution:



I'm not happy with the cloud in front of the sun, so it's going to change slightly for a more roundish look (probably I won't be able to work on it until tomorrow).

[saimo]

Final (hopefully) version of sunset sky plus various tests for the night time:



It looks like the best solution is going for a completely blue sky... what do you think?

[coffee]

I would probably say the 3rd or 4th one, I like the contrast the dithering gives it. However, I would go with the fullmoon, but remove the rings and make it as big as the halfmoon, with the same size on the face details, which atm seems just a bit too small.

[saimo]

I would probably say the 3rd or 4th one, I like the contrast the dithering gives it.

I like that as well, but unfortunately it also makes the borders very evident, which clashes terribly with the otherwise smooth blue -> black transition (and it also gives less room to play with colors)

However, I would go with the fullmoon, but remove the rings and make it as big as the halfmoon, with the same size on the face details, which atm seems just a bit too small.

Do you mean something like this?



(The second image is what I was working on before reading your post.)

EDIT: used dithering for smoothing the curve and retouched the moon (Whoops... just noticed I've accidentally screwed up the back of the moon - please ignore):



What's better, multi-colored stars, or yellow stars only?

EDIT 2: fixed to comply with HIRES limitations:

[saimo]

The release of the final version is getting closer and closer, so lately I've worked also on a logo for the title screen:



The topmost one has been ready for a few days already and I'm quite happy with it. However, last night the idea shown in the second logo occurred to me. Conceptually, the second logo is definitely better (it has a meaning that perfectly fits the title and the whole game concept), but, aesthetically, I don't like it particularly - it looks too plain So, I tried to spice it up a bit and came up with the other logos. Currently I'm undecided between the logo at the top and the one at the bottom. What would you pick? Would you suggest some other alternative?

[bucketfast]

The bottom one is the most appealing to me because its variable bubble resolution is fine enough to make out the curl, yet vague enough to keep a sense of mystery.

I would suggest that you reverse the bubble pattern (small -> big) on the pig's face though, so it looks like a creepy fractal. Then you might have room to work the eye and smile back in -- if you do, try making the gapes larger for a more grotesque feeling. =)

...I'm just going to add that, a coworker was squinting over my shoulder while I was on the recent posts page, and went "lol bluekkake" at your fourth logo from the top. Something to keep in mind, I suppose. =/

[saimo]

The bottom one is the most appealing to me because its variable bubble resolution is fine enough to make out the curl, yet vague enough to keep a sense of mystery.

Well, mystery is not what I'm aiming for... but let me ask: is it clear enough that the "curl" is meant to be the pig's tail?
Anyway, you know, eventually I guess I'll go for the last logo because it just makes too much sense, even if I keep on preferring the first logo from an aesthetic point of view.

I would suggest that you reverse the bubble pattern (small -> big) on the pig's face though, so it looks like a creepy fractal. Then you might have room to work the eye and smile back in -- if you do, try making the gapes larger for a more grotesque feeling. =)

That wouldn't work: the bubbles are meant to create a color transition that still leaves the shapes recognizeable.

By the way: I've changed a few pixels here and there to improve the transitions and replaced the light green with the lightest grey, but that's not something worthy of posting an updated picture.

EDIT: OK, done some more work to make the transitions less boring and more effective:

[bucketfast]

I think I was reading it in artsy demoscene mode, I don't know. =S I guess it's because the abstract chill is pretty different, at a first glance, from the starkly cute style of the rest of your game. The new grayshift really helps to even out the temperature though.

As for the middle blob's pigtail, it's easier to tell in context if you can see the curve of its forehead and snout, since no ears are visible.

Have you considered tweaking your Kirby dots to be more squareish, sort of a scattered chip dither? Gently rounded boxes would echo your bevelled platformer elements and retro modern lettering -- perhaps the inorganicness would pre-empt sillier player reactions, like in the edit to my last comment. =P

[saimo]

I think I was reading it in artsy demoscene mode, I don't know. =S I guess it's because the abstract chill is pretty different, at a first glance, from the starkly cute style of the rest of your game.

Well, yes, that was the direction at first. After I had the idea of adding the pig silhouette, I was trying to preserve some of that feel.

The new grayshift really helps to even out the temperature though.

Glad to hear it works. I wasn't really sure

As for the middle blob's pigtail, it's easier to tell in context if you can see the curve of its forehead and snout, since no ears are visible.

Yep.

Have you considered tweaking your Kirby dots to be more squareish, sort of a scattered chip dither? Gently rounded boxes would echo your bevelled platformer elements and retro modern lettering -- perhaps the inorganicness would pre-empt sillier player reactions, like in the edit to my last comment. =P

mmm... aren't the dots already squareish enough?
Anyway, have a look at this new version, where I tried to improve the variety and underline the shapes more effectively (while at it, since now I have more room, I have also increase the curviness of the outer corners - actually, that's how they were at the very beginning):



The additional logo is for an alternative version of the game.

EDIT: after making this post, I realized the 'X' in the alternative logo didn't reflect the original one. So, I went to remove the 4 pixels at the inner corners, but, in the process, a thought occurred to me: the style of the "wrong" 'X' was actually more fitting than the original's! So I changed the original one and realized one more thing: the thickness of the "cuts" of the letters in "QUOD" weren't consistent with the rest. Therefore, I landed to this:



I'm also considering rouding the slanted parts of 'N' and 'X' a bit... let's see...

EDIT 2: hey, the rounding seems to work...



EDIT 3: at first I thought I could stand and actually come to like the asimmetry of letters, but, no, I just can't...



I guess I'll call it done and stop pestering you Pixelationers