AuthorTopic: Title Sceen WIP  (Read 1605 times)

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Title Sceen WIP

on: April 11, 2020, 12:23:13 pm
Hiya,

worked a bit on the opening screen for a game,

looking for any tips to improve clarity, design/composition

Added a grey layer to get more of a background/foreground feel



without grey layer:



was also thinking of doing a small animation like this:



thx for reading ;)

Offline eishiya

  • 0100
  • ***
  • Posts: 1226
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Title Sceen WIP

Reply #1 on: April 11, 2020, 01:20:59 pm
The grey layer is so faint that it doesn't help, the background is still very bright/contrasty. Also, when you want to reduce the contrast of something, quick-fix adjustments like this are usually a bad idea, because they can make the whole piece look dull, often without fixing the fundamental contrast issues. Manual colour adjustments (e.g. making the colours closer to the ambient colour, which would probably be the sky blue in this scene) and reducing the number of colours used for distant objects (because distant details are harder to make out) are the more effective techniques.

I think the character animation would be great! Some subtle animation in the background would also be nice.

I was going to suggest having the character cast a shadow, but I think they already are...? it's hard to tell whether it's a shadow from them, or from the shape of the rocks. The rocks themselves feel more like a pile of rocks than a cohesive surface that could form an overhang/cliff the character could stand on, because they're all uniform in size and shape and have a lot of shadows (=separation) between them. Overhangs like this are typically a single rock (or a single tight blob of dirt), perhaps with some smaller/debris rocks on it (or embedded into the dirt).

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #2 on: April 12, 2020, 11:46:58 am
dang, someone already told me about shifting the colours to the ambient color before, guess i just completely forgot lol

here's an attempt, maybe i need to push it further:



some other rock ideas:





as for background animations, do you mean the clouds moving? or smaller things like birds flying up

edit: 3d-ish letters

« Last Edit: April 12, 2020, 02:28:04 pm by Mathcong »

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #3 on: April 14, 2020, 08:51:14 pm
another update, more "oriental"  looking font and cloud scrolling in unity



the little select arrow isnt pixel perfect but thats some unity stuff :p

Offline eishiya

  • 0100
  • ***
  • Posts: 1226
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Title Sceen WIP

Reply #4 on: April 14, 2020, 11:01:54 pm
I like where you're going with the animations, but the animation happening on a different pixel grid to the "pixels" in the art looks strange, and makes the various tangents in the art more obvious.

On a similar note, mixing different pixel sizes like you are with the art and text doesn't look great IMHO.
Will the actual gameplay have the same resolution as this title screen? If not, I recommend making the two match. Then, chances are you'll have plenty of space for text and smooth animations without mixing scales.

That said, mixing scales is a taste thing, so if you really like the look of it, keep doing it.


I like the rocks you chose. Consider making some of the lines between them implied/broken, they don't all need to be solid. That might help the surface feel more cohesive while still looking rocky.
« Last Edit: April 14, 2020, 11:05:41 pm by eishiya »

Offline Mathias

  • 0100
  • ***
  • Posts: 1794
  • Karma: +2/-0
  • im not real
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Title Sceen WIP

Reply #5 on: April 15, 2020, 08:08:53 am
Hey, Mathcong. Good effort. Here's my quick take -

Mismatched pixel grid issue aside (that's a tough one) -

---Game is called "Slashy Ninja", which sounds pretty action-oriented and violent, but the title screen couldn't be more calm and tranquil, featuring a generic but solid mountain/sky horizon scene. [insert any Bob Ross quote]
I feel this title screen concept and the game's apparent concept clash. (Based on the name I'd guess it's a bloody Ninja Gaiden-like platformer.)

---I think title screens are super important. Gotta be good. Especially the game's title text.
Think of your game's title screen like a book cover - What do you assume about a book if even the cover is boring and unappealing?
A book cover's job is to grab attention and make you want to open it. For small indy games, the title screen often doubles as the primary key marketing/promotional art.

---Here's a super fast edit mainly addressing foreground/background separation:


I'll let it speak for itself, might give you a few ideaz.
Definitely do animate it. I love the bandana blowing in the wind.

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #6 on: April 15, 2020, 10:21:58 pm
I like where you're going with the animations, but the animation happening on a different pixel grid to the "pixels" in the art looks strange, and makes the various tangents in the art more obvious.

On a similar note, mixing different pixel sizes like you are with the art and text doesn't look great IMHO.
Will the actual gameplay have the same resolution as this title screen? If not, I recommend making the two match. Then, chances are you'll have plenty of space for text and smooth animations without mixing scales.

That said, mixing scales is a taste thing, so if you really like the look of it, keep doing it.


I like the rocks you chose. Consider making some of the lines between them implied/broken, they don't all need to be solid. That might help the surface feel more cohesive while still looking rocky.

how important do you think it is for the menu to be the same resolution as the gameplay?

the menu is like 120x64 and the game 480x256 so like 4 times the pixel count, and im not sure i can make it look good.

I had a little try at it with varying results lol:



i will make sure the text and animation are the same grid/ scale though, thx

Hey, Mathcong. Good effort. Here's my quick take -

Mismatched pixel grid issue aside (that's a tough one) -

---Game is called "Slashy Ninja", which sounds pretty action-oriented and violent, but the title screen couldn't be more calm and tranquil, featuring a generic but solid mountain/sky horizon scene. [insert any Bob Ross quote]
I feel this title screen concept and the game's apparent concept clash. (Based on the name I'd guess it's a bloody Ninja Gaiden-like platformer.)

---I think title screens are super important. Gotta be good. Especially the game's title text.
Think of your game's title screen like a book cover - What do you assume about a book if even the cover is boring and unappealing?
A book cover's job is to grab attention and make you want to open it. For small indy games, the title screen often doubles as the primary key marketing/promotional art.

---Here's a super fast edit mainly addressing foreground/background separation:


I'll let it speak for itself, might give you a few ideaz.
Definitely do animate it. I love the bandana blowing in the wind.

i guess i din't give much info about the game itself, but it is gonna be a more laid back, adventure platformer.

Thats also why i changed the font in my last update, the previous one for sure looks more action/ street fighter oriented.

your edit is very helpful though, i will add some reflections to the lake and make the mountains more blue-ish ;)

Offline Mathias

  • 0100
  • ***
  • Posts: 1794
  • Karma: +2/-0
  • im not real
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Title Sceen WIP

Reply #7 on: April 16, 2020, 04:07:33 pm
480x256? I think you might be after 480x270. A lot of modern pixel games run at 480x270, including Enter the Gungeon and Hyperlight Drifter. Maybe you're not accounting for HUD in those dims.

I would settle on a pixel size for all graphics and just stick to it.
The menu being significantly lower res than the rest of the game seems strange. If filling a large 480px wide screen with a nice title screen graphic seems too challenging, try coming up with a simpler concept.

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #8 on: April 16, 2020, 09:13:55 pm
480x256? I think you might be after 480x270. A lot of modern pixel games run at 480x270, including Enter the Gungeon and Hyperlight Drifter. Maybe you're not accounting for HUD in those dims.

I would settle on a pixel size for all graphics and just stick to it.
The menu being significantly lower res than the rest of the game seems strange. If filling a large 480px wide screen with a nice title screen graphic seems too challenging, try coming up with a simpler concept.

I guess the main challenge for me would be the character in the title screen.

i feel like i can't use the same cartoony/simplified shapes i would use for a 32x32 character, and would have to go near human-anatomy :



the background i could handle, made a few of that size for the game.

here is some in-game footage, maybe that will clarify:


Offline eishiya

  • 0100
  • ***
  • Posts: 1226
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Title Sceen WIP

Reply #9 on: April 17, 2020, 12:58:22 am
Treat your title screen as an opportunity to fill in the details that the game has to simplify away for the sake of simplicity and readability. What do you want to tell the player?

Think about the composition as well. With a larger canvas, you're not as limited as you were with the older version. Having a huge character like that comes across as the character has or will conquer this world, that the world is meant to feel insignificant compared to their (=the player's) skill. If, instead, you want to communicate the world being vast and something to explore, then it's good to have a much smaller character, perhaps even as small as the original sprite.

Edit: Minor nitpick about the gif you posted: It looks good, but the style of the lights is inconsistent. The light halo around the character has soft edges, but the environmental lights have hard edges. IMO the hard edges suit the art style better, I think the character would look better with similarly hard-edged lighting.
« Last Edit: April 17, 2020, 01:01:09 am by eishiya »

Offline Mathias

  • 0100
  • ***
  • Posts: 1794
  • Karma: +2/-0
  • im not real
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Title Sceen WIP

Reply #10 on: April 18, 2020, 03:23:02 pm
Nice! Got a working build going. Looks cool so far.
You're not asking for this, but here's a little platformer player characters controls info I recently found and thought was very insightful.


I like eishiya's point on the light aura parented to the player character. Not only does it look inconsistent with the other light auras in the game (it's also rather distracting - why is there a tiny yellow glow emitted from the player?), but I wonder if you might just handle it completely differently - instead of trying to lighten the area around the character, try a vignette to darken the edges of the screen. Would make sense in a night scene and I think it implies the player has a finite viewing distance, especially in Vagante's extreme vignette implementation:


I bet you've played Terraria. More good lighting examples.


Oh man . . . 480x256 is a scary size for a singular piece of pixel art. You may have done some bg tiles that span that size, but have you done any single cohesive scenes at this size? It'll be a project.
Maybe 240x128 instead? Which is double your game's res instead of only a quarter of like your original title screen version. Yeah . . . 480 is massive. Find a way to simplify the task.

As for the character proportions issue, that's an interesting one. I don't see any problem with a larger rendered version of the protagonist having different proportions on the title screen if resolution allows. Very common in games.

I'm reminded of Cave Story+ and how it handled doubling pixel resolution for its sprites.


Personally, I vote for a more realistic looking figure for the title screen. It lets the player know what the character really looks in true form. If you have any portrait art in the game using large enough sprites, it would likely use these same realistic proportions as well.

You're the art dude for this one - make a call, commit to it, and keep going.

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #11 on: April 19, 2020, 11:03:14 pm
Thanks for the comments on the little gameplay gif, i will for sure try out that vignette thing at a later time.

I think trying the bigger title screen will force me to learn some different styles, so why not give it a try while i got the time :p

 I have sketched out the layers on the big format, and tried adding some details on the right of the picture:



got alot of ideas from this evoland title screen:



I am pretty happy with the background composition now, and tried some different things with the foreground:



on one hand i like the smaller character, to give more importance to the world around it,

on the other hand i really liked the bandana flapping lol. (wich might be less visable).

maybe you peoples can help pick out the stronger compositions? :)

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 202
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel

Re: Title Sceen WIP

Reply #12 on: April 20, 2020, 08:11:25 am
I'm a big fan of those clouds. :)

I was wondering. Why is it called "Slashy" Ninja? I assume it's not just because he has a sword. All ninjas have swords. Giving him that name implies that he's extra-slashy somehow. Does he love slashing a little TOO much, even for a ninja? Does he like to slash to do things that normally you wouldn't do with a sword, like switch on light switches and open doors? I feel like there's some back story here, and (given the use of the "y" on the end of "slashy") some humour.

If so, it might be nice to incorporate some of that in this image.

On the other hand you're quite a way along the process now, so probably best to ignore me.

Offline Mathias

  • 0100
  • ***
  • Posts: 1794
  • Karma: +2/-0
  • im not real
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Title Sceen WIP

Reply #13 on: April 20, 2020, 02:12:38 pm
If I had to pick one, I'd go A1 because it features the largest title which I consider to be the most important element.

Offline TPoe

  • 0001
  • *
  • Posts: 53
  • Karma: +0/-0
    • RoyalePoe
    • http://pixeljoint.com/p/20746.htm
    • View Profile

Re: Title Sceen WIP

Reply #14 on: April 27, 2020, 08:34:27 am
I pick A1's title, and B1's character. Having it be slightly bigger increase the depth of the background and overall feels more "epic."

Offline Rydin

  • 0011
  • **
  • Posts: 915
  • Karma: +0/-0
  • ...zzzt...
    • @thickDumps
    • View Profile
    • thickDumps

Re: Title Sceen WIP

Reply #15 on: April 27, 2020, 08:45:31 am
A1 looks the most professional. Clients are going to love this. Customers are going to expect it.

D1 is the most aesthetic. That is to say it exhibits the highest sense of refined taste and it is the responsibility of the cultured man to be intolerant of mediocrity.

Choose wisely.
Man cannot remake himself without suffering for he is both the marble and the sculptor.

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #16 on: April 28, 2020, 08:11:24 pm
I'm a big fan of those clouds. :)

I was wondering. Why is it called "Slashy" Ninja? I assume it's not just because he has a sword. All ninjas have swords. Giving him that name implies that he's extra-slashy somehow. Does he love slashing a little TOO much, even for a ninja? Does he like to slash to do things that normally you wouldn't do with a sword, like switch on light switches and open doors? I feel like there's some back story here, and (given the use of the "y" on the end of "slashy") some humour.

If so, it might be nice to incorporate some of that in this image.

On the other hand you're quite a way along the process now, so probably best to ignore me.

the title is mainly because of this move that gets used while platforming/ and attacking maybe :p



wasnt feeling great for a while, but recently worked some more on the screen:



should i keep the font basic, or add some extra effects like these?







if you have examples of fonts/game titles that would fit well let me know ^^

Offline Mathias

  • 0100
  • ***
  • Posts: 1794
  • Karma: +2/-0
  • im not real
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Title Sceen WIP

Reply #17 on: April 29, 2020, 06:07:29 pm
Glad you're feeling better. Don't get that 'rona.

No amount of decorative embellishment is too much for your title screen. Make it as eye-catching as possible. Go ham.

By the way . . . https://www.titlescream.com/

Offline TPoe

  • 0001
  • *
  • Posts: 53
  • Karma: +0/-0
    • RoyalePoe
    • http://pixeljoint.com/p/20746.htm
    • View Profile

Re: Title Sceen WIP

Reply #18 on: April 30, 2020, 12:44:19 am
I think the 3rd or 4th font work the best and are way more readable. The third one is probably the most eye catching. Also I wanna say great job on the background the rocky platform looks great.

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #19 on: May 02, 2020, 05:14:21 pm
another update, found a font style i liked and cleaned up the reflections.



cloud reflections still dont look quite right, not curving with the curve of the lake but thats more of a unity thing.

 i will do some detailing next, maybe some lighting on the edge of the lake and on the letters

thx for that awsome title -screen website btw, helped me alot!

« Last Edit: May 02, 2020, 06:01:54 pm by Mathcong »

Offline Mathias

  • 0100
  • ***
  • Posts: 1794
  • Karma: +2/-0
  • im not real
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Title Sceen WIP

Reply #20 on: May 03, 2020, 06:55:49 pm
Yo. Yep that title screen site is really cool. Should've linked it sooner.
So uhh, my background is in graphic design, and as a graphic designer I'm pretty confused by the current title color choice, making it blend into the sky. You've got a blue sky, then a red stripe, then the same blue again for the type. In my opinion it creates an awkward contradiction - scale of the lettering implies the type element is important, but at the same time the colors are low contrast, blending into the background as if to be less visible. Does your ninja cloak and go transparent mode or something?
The lettering shapes are fine. I think the rest is a no-brainer - high contrast/high energy color combination.
I would probably tighten up the N and J's kerning.

Should the cloud reflections actually curve/warp? I don't think so. Not unless the surface of the lake itself is curved, right? Otherwise it's basically a flat mirror and your current iteration has it correct.
If anything I'd change how the sides of the lake wrap in towards us like the shot was taken with an extreme fisheye lens. Seems to defy normal perspective.

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #21 on: May 04, 2020, 03:40:14 pm
Yo. Yep that title screen site is really cool. Should've linked it sooner.
So uhh, my background is in graphic design, and as a graphic designer I'm pretty confused by the current title color choice, making it blend into the sky. You've got a blue sky, then a red stripe, then the same blue again for the type. In my opinion it creates an awkward contradiction - scale of the lettering implies the type element is important, but at the same time the colors are low contrast, blending into the background as if to be less visible. Does your ninja cloak and go transparent mode or something?
The lettering shapes are fine. I think the rest is a no-brainer - high contrast/high energy color combination.
I would probably tighten up the N and J's kerning.

Should the cloud reflections actually curve/warp? I don't think so. Not unless the surface of the lake itself is curved, right? Otherwise it's basically a flat mirror and your current iteration has it correct.
If anything I'd change how the sides of the lake wrap in towards us like the shot was taken with an extreme fisheye lens. Seems to defy normal perspective.

Your reply was pretty much spot on i think, i guess colour is still a weakness of mine :p

after trying some colours i figured yellow would really stand out on the blue:



i tried some different things to make the water reflection less "perfect".



the dithering didnt look good with the moving clouds behind it though .

EDIT:

managed to make shadergraph work with my project, made a little water shader:



i made it very extreme in this gif of course, it would normally move way slower :)
 
« Last Edit: May 04, 2020, 06:09:31 pm by Mathcong »

Offline Mathias

  • 0100
  • ***
  • Posts: 1794
  • Karma: +2/-0
  • im not real
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Title Sceen WIP

Reply #22 on: May 04, 2020, 08:31:44 pm
Type lookin' swank! Much better.

Ohh you're gonna do a displacement thing real-time in Unity, ok gotcha.
Two things - keep it nearest neighbor and consider Slym's recent subtle water refraction animation:

No shader required for this, just a mask consisting of horizontal bars moving vertically to reveal a different version of the image offset by 1px.
Could use a similar trick to animate some of that windblown white caps texture we talked about earlier, too. To add on top.

Also, your wind direction. Do you see a problem? lel

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #23 on: May 06, 2020, 08:02:05 pm
that was a great tip, took me a bit to get it setup in photoshop, but here it is :p



I think i pretty much implemented everything i wanted for this title screen, so probably gonna finish it up now,

EDIT: all put togheter:


« Last Edit: May 06, 2020, 08:26:10 pm by Mathcong »

Offline eishiya

  • 0100
  • ***
  • Posts: 1226
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Title Sceen WIP

Reply #24 on: May 06, 2020, 08:29:22 pm
Why are the reflections of the trees and mountains stretched towards the sides?

The water ripple effects look nice though, good job!

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #25 on: May 06, 2020, 09:24:09 pm
Why are the reflections of the trees and mountains stretched towards the sides?

The water ripple effects look nice though, good job!

i thought that the mountains and trees reflection had to curve with the lake, but maybe i'm completly wrong lol

when i just flipped the image vertically , they didnt match up of course, only the middle part.

so i matched the reflections position up with the water level all around the curve



Offline eishiya

  • 0100
  • ***
  • Posts: 1226
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Title Sceen WIP

Reply #26 on: May 06, 2020, 11:50:31 pm
The reflected parts would definitely not stretch. As someone else explained re: the clouds earlier in the thread, the reflection doesn't resize the object. However, all the different elements would be at different positions in the reflection. (They'd also be seen from different angles, but since these are all distant objects, you can probably get away with just flipping).

Offline Mathcong

  • 0001
  • *
  • Posts: 61
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: Title Sceen WIP

Reply #27 on: May 07, 2020, 07:51:34 pm
I guess i was trying to show the entire forest reflected, wich doesnt make alot of sense

would this version be better, only showing the first row of trees's reflection?



framerate is faster, dont mind that  :lol:

Offline eishiya

  • 0100
  • ***
  • Posts: 1226
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Title Sceen WIP

Reply #28 on: May 08, 2020, 03:35:32 pm
I think this is better, yes. I think we'd see a bit of the peak of the second mountain from the left, though.

Also, your gif doesn't loop xP