🤑 Indie game store🙌 Free games😂 Fun games😨 Horror games
👷 Game development🎨 Assets📚 Comics
🎉 Sales🎁 Bundles

Graphic/UI design feedback.

A topic by VonBednar created Jan 14, 2017 Views: 390 Replies: 12
Viewing posts 1 to 5
(Edited 6 times)

Hi,

Just found out about TIC from this tweet.

It seems like a great platform and an interesting alternative for Pico-8, especially when it comes to bigger games thanks to the larger resolution and 512 tiles for sprites. I like the less saturated color palette, kinda reminiscent of Commodore64 and that it can run in the browser. All together, it looks like a great project.

I have only recently started learning how to code with Pico8, so I am not a programmer, but I come from an art and design background so I decided to throw my two cents from that perspective. Some of what I will say might sound harsh, but I am trying to be constructive with this feedback. I know TIC is still in its early stages of development, but there is already a lot of good here, but there are some things that might turn away potential users. I think with few tweaks it can become a great platform!

  1. The font. This is the biggest offender. It is very straining to read the text, especially with such a high contrast that is used in the editor. A quick and dirty fix could be changing the BG from black to the dark gray (color 4), but that would only minimize the eye strain and not fix other issues. I know that you have changed the font from all uppercase to this 6x6 font, but there are serious issues here. Things like pixel clumping on e and x, the lowercase j is a complete mess (why is it the only letter out of j p q y that does not go under baseline?). Lowercase l looks nothing like a proper l... and so on. Then we have the issue of kerning (space) between the letters, that tries to stick to the 6 pixels wide formula, even when the letters are narrower (see lowercase c or i). The font needs to be monospaced (so has the same amount of white space between each letter). The font right now is something that actively prevents me from trying anything in TIC. My eyes get tired after around a minute of looking at the text.
    I am not sure how your font works on TIC, are those just 6x6 pictures or a true .ttf / .otf files? If it is the later, I will be happy to make you a font similar to what you have now to use for TIC.

  2. The palette. I love that your palette is reminiscent of the c64 less saturated colors. For once, it creates a very good "branding" for the system, similar to what the colorful palette does for Pico8. However, you will find that the values (how light/dark the color is) are little too close to each other. This will lead to blurry pixelart. Here is a quick comparison between your and c64 palette. In the c64, outside of white and black you can find four distinctive value groups (Blue, Brown, DK Gray, Red), (Purple, Orange), (Green, Pink, M Gray, Lt Blue), (Lt Gray, Lt Green, Cyan, Yellow). Your value groups kinda blend together because they are not light/dark enough to be distictive. The first six blend together, then the second seven and last three. With only three groups, two of which hold the majority of color, fast paced games will look blurry. Pico8 can get away with it because of high saturation of its colors, but with more pastel palette like the TIC has, you might run into blur problems and making it more difficult for colorblind people to use your software. Overall, the palette needs only tiny tweaks.
    edit: Just noticed the palette tool and that you are using DB16 as default, so you might not want to change it. DB16 seems to work well for pixel art, but I have never seen it used in a fast paced game, so the issue above probably still exists. It might be a good idea to develop your own palette or add the palette tool as a part of the system, so developers could choose a palette for their game and players wouldn't have to change them by hand before playing.

  3. The UI. The UI works well (love the GOTO function option), but needs minor tweaks. The biggest one is again contrast, as described in 1. I would also change the top and bottom bar from white to something more subdued, maybe light gray (11) or even darker like medium blue (9). It would be even better if we users could set UI colors (a feature also requested in Pico8 due to colorblind difficulties). Adding icons to the top panel instead of numbers would also be a nice touch, because it is really easy to forget what number corresponds to what. Also a tracker view for sounds would be awesome, but I guess that will come with music.
    One thing that I think is spot on is the map editor. Subdued colors don't strain the eye and sprites are hidden in an expandable menu. I would love this to be also an option in the drawing panel, making the drawing window bigger where the sprite map is hidden (useful for working on tiles bigger than 8x8).

Other small UI / UX / ease of use tweaks to add:

  • Make the sound piano keys accessible with keyboard while on that screen / maybe print which keyboard keys correspond to which piano key on the piano graphic.
  • When you mouse-over the editor menu, change the text from current editor (e.g code editor) to where the mouseover leads (eg. sprite editor). New text in different color?
  • Add similar hints to the Find/GOTO/Function menu on the right in code editor
  • Add import/export of spritesheets and sounds
  • Ability to scale the window up by a factor (2x, 3x etc) for high resolution screens.
  • more exciting logo?

Again, sorry if I sound a bit harsh, but I really want to see this project blossom. I think those issues are stopping it from doing so. I want to help to the best of my ability to make TIC even better.

I think that one thing added to the popularity of Pico8 is the community around the forum. Making a dedicated forum where people could post their games ready to play and discuss the system would be of a great benefit. Same for a splore like function from Pico8 to browse games stored on this community website.

Anyway, let me know what you think about this feedback and if I can help in any way.

Developer (Edited 2 times)

Hi,

WOW, thanks for the great review, I'm really appreciate it because I'm only a programmer without design background and you are helping me to understand the parts of puzzle I don't see well. So...

The font. This is the biggest offender...

I only see a way to make the font better is to make it 8x8, it should remove problems with e,x,l... lowercase letters but in other hand this will reduce area for text editing from 40x22 to 30x17, don't want to do it :(. And it would be great If you find a way how to fix current TIC font. It's just 6x6 bitmap pictures.

The palette...

Yes the default palette is DB16 and you can change it from the Lua code (try to load palette.tic demo). Also I'm going to create a page where you can edit a cartridge meta info like title, author, description, screenshots for publishing and there can be small palette editor to change default palette for a game.

The UI...

Here I'd like to create config tool to setup gamepad buttons mapping, touch screen gamepad, default palette and colors for all the UI items, also with export/import to let other people use this settings. Great idea with hiding spritesheet in Sprite Editor to make canvas bigger, will try to do something.

Other small UI / UX / ease of use tweaks to add...
  • You can use number buttons to play notes on SFX EDITOR. Will print keyboard keys on the piano.
  • When you mouse-over the editor menu, change the text from current editor (e.g code editor) to where the mouseover leads (eg. sprite editor). New text in different color? - will do.
  • Add similar hints to the Find/GOTO/Function menu on the right in code editor - will do.
  • Add import/export of spritesheets and sounds - will do.
  • Ability to scale the window up by a factor (2x, 3x etc) for high resolution screens. - it's already scales by 2x, 3x when you resize window or what do you mean?
  • more exciting logo? - I would be grateful if you would propose something :)

I have plans to make a dedicated place to let people upload games and discuss in the future, but itch.io is also great place to do it while app is in development state.

So, if you want to help with design it would be great because I really want bring TIC up to a decent standard and let people make games and learn programming for free.

Thanks for the detailed feedback.

Ok, I will work on the font tonight, hopefully have it done by the end of the weekend.

One quick question. Do all the letters need to be six pixels wide? Normally, the 8bit fonts (atari 400/800, c64, Apple][ and so on) had a varied width and set height (as seen here here). To keep the font readable, it would be best if we could use varied font width. It all depends on how are you coding it. I can provide you with a table of widths for each symbol, so they can be rendered with correct spacing.

If you are using a ttf or otf I can just do the spacing in the font file.

As for the other things. I think making your own (or at least tweaking the DB16) would make the games/system more recognizable.

As for scaling the window. I would love either a key combo or a parameter to run the program at 200 or 300% size of what it normally runs. Tweaking the window size by hand each time you run TIC is a little fiddly.

I will respond to the rest of your post later, it was a busy day for me and I want to get cracking on the font.

Developer (Edited 5 times)

Example to show how TIC render font

Every letter takes 6x6 pixels place, it's necessary for the code editor (usually all the code editors have monospace font).

So, this is a problem we can't change letters width :(

EDIT:

I'll try to make a demo with varied font width in the code editor soon and we decide then

EDIT2:

So, I've made a demo with varied width font, you can test it here https://nesbox.itch.io/tic-test?secret=E1qg7kuahPg...

(Edited 3 times)

I have tested the varied font width and it works awesome!

With that in mind, I have started to revise the font. I fixed the lowercase x and tweaked some lowercase letters. The 5x4 size is a bit limitting, so the we don't have enough space for a counter in lowercase e or adding more heft to the lowercase i (as it is, a dot and a dash makes it look more inline with the other lowercase letters, previously it looked shorter).

For the uppercase I have decided to add a bit of chunkiness to their form. It is inspired by both Atari 8bit computers and early gameboy fonts. This will make the text altogether, but especially all uppercase, will be much more pleasing to the eye. The added width made M,T, W & Y a full 6 pixels wide, while I & L are now 4 pixels wide. I think it will balance the overall line width, especially with the lowercase letters being 4 pixels wide at most. (I am not sure how your text width function work, but I guess just reading where the "white" text pixel are and adding a blank pixel to the right for monospacing and making text read well.

Let me know what you think and see if that would work. I started working on the numbers, but I will look at the symbols, but I think those are already pretty good, needing maybe little TLC. I am thinking of making the punctuation symbols (. , ; :) a little thinker, because they are quite important for code.

edit: now with chunkier lowercase!


Despite the big effort from level27geek I'm not totally convinced by this font. It looks awesome rounded and pleasant but when it comes to write and read code I feel better with the original one. It's also impossible to regular indent even simple variables assignation. Maybe the colors or contrast is also playing an important role in the final result in the Code Editor.

That's just my thought.

http://pasteboard.co/mRXbDvXVv.png

Developer

I like new font, it's stylish and looks pretty well, only one thing I find hard to accept is that font isn't monospace.

I confess I'm a little attached to TIC logo. It's kind of rude and raw but it make me smile.
DB16 never convinced me and a fine tuning will help make TIC more appreciable. Import/Export will help also teamwork.

I am planning on keeping the 8x8 pixel logo, as I think it is an important aspect of the system. What bothers me right now is the main color (the gray is very boring) and the fact that the black implies going outside the 8x8 size but looks like it's missing.

As for the DB16. I think it looks pretty good, but the values are lacking. I am just starting with pixelart, so if you feel comfortable in tweaking the DB16 palette to fix its values, feel free.

I think we there should be a way to make your own fonts and your own color scheme.

Because I personaly prefer to have monospaced fonts.

But it is true that the fonts made by level27geek is cool.

Thank you for the kind words :)

I would be against loosening the limitations in such way. If TIC is supposed to be a fantasy computer, I would rather have fantasy limitations. I think TIC is a strong contender to be a fantasy computer to pico8's fantasy console.

Most of the 80s computers and consoles had a limited palette. If not not limited to single color palette, then it would use like 8/16 colors out of 64 or something similar. Same goes for fonts. Very few systems had multiple system fonts, and if they did, they usually corresponded to a different graphic mode.

From my experience with pico8, I can say that those limitations spark creativity, and attract people to the system.

Also, clear cut limitations is what made pico8 stand out. There is a lot of small game engines out there, but they seldom gain a big following. If you try to do everything you will get lost in a sea of lookalikes.

Saying all that, there wouldn't be anything stopping programmers from including their own fonts for their programs by utilizing the sprite sheet and some code.

Developer

Yes, you can design your own font on the foreground spritesheet and bitpack the font (if it will be monochrome) to save memory.

By own fonts and own color scheme, I meant allowing each user to customize their own TIC.

Like a tiny config file that change the default color palette on boot up (but keeping the 16 colors limitation).

As for the font, a special directory where you can place your custom font so it gets loaded on boot up.

But the font and the color scheme wouldn't be stored in the cartridges (well you can still change the color scheme by playing with the RAM). It would be just a setting for this particular user.