AuthorTopic: Animated warning text  (Read 9636 times)

Offline Basketcase

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

Animated warning text

on: December 16, 2011, 01:19:12 am

This is supposed to be like a warning sign you might see in an arcade shooting game before a boss. Each letter will spin in and spin out of view. So when that's done, it'll start and end with a row of pink rectangles. I need to decide a nice way to have those rectangles animated into and out of existence. Maybe by spinning along the Y-axis.

There might be more text underneath, that's why I left that space.

I think I should put down the outlines for everything before I colour and AA. (Instead of polishing each letter one by one, like I did the G.)

I want to make a couple of these.

Comments + critiques + ideas appreciated!





« Last Edit: December 22, 2011, 02:40:22 pm by Basketcase »
To do: ??? Cow made my lovely avatar.

Offline milleja46

  • 0001
  • *
  • Posts: 34
  • Karma: +0/-1
    • View Profile

Re: Animated warning text [WIP]

Reply #1 on: December 16, 2011, 01:28:33 am
It starts out right but you don't see the other side of the G when it rotates it does it partially then goes wrong with the rest of the rotate

Offline Phlakes

  • 0010
  • *
  • Posts: 236
  • Karma: +0/-0
    • View Profile

Re: Animated warning text [WIP]

Reply #2 on: December 16, 2011, 02:10:20 am
It starts out right but you don't see the other side of the G when it rotates it does it partially then goes wrong with the rest of the rotate

If you're talking about what I think you're talking about, that's the point of it. He said they'll all start as rectangles and then rotate into letters.

Offline Basketcase

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

Re: Animated warning text [WIP]

Reply #3 on: December 17, 2011, 02:40:53 am

Outlines finished. Now need to colour them. And then animate some sort of fade in/out. Might re-calibrate the timing so each letter starts spinning in earlier in relation to the previous.
To do: ??? Cow made my lovely avatar.

Offline Phlakes

  • 0010
  • *
  • Posts: 236
  • Karma: +0/-0
    • View Profile

Re: Animated warning text [WIP]

Reply #4 on: December 17, 2011, 03:23:07 am
I think the lighting on the tops of the letters needs to fade in a bit. It just appears out of nowhere. And the yellow part of the G shows up too early.

Offline Basketcase

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

Re: Animated warning text [WIP]

Reply #5 on: December 17, 2011, 03:47:32 am

Previous one was mostly uncoloured. Here I've tried to have the hilight on top slide in... and it looks real choppy. Maybe i need an intermediate colour between pink and orange to do a fade effect.
To do: ??? Cow made my lovely avatar.

Offline tehwexxl0rz

  • 0010
  • *
  • Posts: 446
  • Karma: +0/-0
  • Swing the bat.
    • ianwexl0rz
    • https://pixeljoint.com/p/15996.htm
    • View Profile
    • Ian Wexler | Game Developer

Re: Animated warning text [WIP]

Reply #6 on: December 17, 2011, 04:29:44 am
I liked the orange/pink dither lines on the old "G" animation! I rather see that put to use than an additional color.

Looks good so far, keep it up! :)

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: Animated warning text [WIP]

Reply #7 on: December 17, 2011, 03:39:26 pm
You shouldn't make it one letter at a time. Start it like a cascade, it will look way more dynamic.

Offline Phlakes

  • 0010
  • *
  • Posts: 236
  • Karma: +0/-0
    • View Profile

Re: Animated warning text [WIP]

Reply #8 on: December 17, 2011, 04:06:39 pm
I liked the orange/pink dither lines on the old "G" animation! I rather see that put to use than an additional color.

Yeah, do this. Makes it look shinier and a little more interesting. No need to raise your color count when you don't have to.

Offline Wes

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

Re: Animated warning text [WIP]

Reply #9 on: December 17, 2011, 08:58:23 pm
will it animate faster in-game? i expect that something saying WARNING shouldn't be anywhere near that slow. i'd love to see this thing sped up to really give a feel of WARNING.

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Animated warning text [WIP]

Reply #10 on: December 18, 2011, 05:53:57 pm
will it animate faster in-game? i expect that something saying WARNING shouldn't be anywhere near that slow. i'd love to see this thing sped up to really give a feel of WARNING.

My thoughts as well..
You need another faster warning text that warns the players about not paying attention to the slowly appearing warning and instead look at the actual danger. ;)

Offline Charlieton

  • 0010
  • *
  • Posts: 167
  • Karma: +1/-0
  • awkward dancer
    • View Profile

Re: Animated warning text [WIP]

Reply #11 on: December 18, 2011, 07:02:08 pm
I've played some shmups were you could actually shoot the warning text, as though it were an enemy. When shot they would spin around, until you finally had them destroyed. Something like that would be applicable in this case too. Consider it!  ;)

Otherwise, as standard warning-text for a shmup, I agree that it's moving too slow.
Det skulle vara lätt för mig att säga att jag inte gillar dig, men det gör jag; tror jag

Offline Ürch

  • 0001
  • *
  • Posts: 33
  • Karma: +0/-0
  • I live in dreaming through the hours
    • View Profile

Re: Animated warning text [WIP]

Reply #12 on: December 18, 2011, 07:57:46 pm
I think you should have the letters begin turning before the previous letter is done turning.

Offline Phlakes

  • 0010
  • *
  • Posts: 236
  • Karma: +0/-0
    • View Profile

Re: Animated warning text [WIP]

Reply #13 on: December 18, 2011, 09:12:57 pm
I think you should have the letters begin turning before the previous letter is done turning.
You shouldn't make it one letter at a time. Start it like a cascade, it will look way more dynamic.

He already suggested that a while ago-

Might re-calibrate the timing so each letter starts spinning in earlier in relation to the previous.

But I still agree.

Offline Basketcase

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

Re: Animated warning text [WIP]

Reply #14 on: December 19, 2011, 10:40:29 pm

Dither lines are back by popular demand! Also, faster with less lag between letters. And there's a (very rudimentary) 'shine' effect.

Next things:
-refine the shine (maybe replace completely. It's simplistic but it seems to look OK...)
-fade out: I don't want to draw the letters rolling in the other direction.
-fade in: something.
To do: ??? Cow made my lovely avatar.

Offline slym

  • 0010
  • *
  • Posts: 192
  • Karma: +0/-0
    • View Profile
    • My Portfolio

Re: Animated warning text [WIP]

Reply #15 on: December 20, 2011, 01:37:29 am
Yeah definitely go for a fade out because personally I think adding anything more to the animation would be rediculous. I'd make the shine come a bit earlier, maybe two or three frames. It just feels a bit delayed. The animation still seems a bit too slow to me. Though it is smooth, I'd imagine a warning sign to be a bit more... flashy? If that's the right word choice :P Anyway, awesome progress. I love where this is going!

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Animated warning text [WIP]

Reply #16 on: December 20, 2011, 01:43:59 am
Start the flash shine earlier, like said above. Make the shiny shape that moves across the letters diagonally slanted. Make the letters rotation animation start fast and exponentially slow down so the G is slowest at the very end.

Offline Basketcase

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

Re: Animated warning text [WIP]

Reply #17 on: December 20, 2011, 02:17:08 am
@slym: I hear you on the need for more flashiness.

@Mathias: slanted shine shape sounds good. (Above, all I did was flood-fill each letter white, then yellow, then orange, one by one.)

I'll have it flash earlier and continuously, like a siren light, yeah. I was wary of having the flash begin earlier because I didn't want it to disturb a still-spinning letter. As it stands, the G gets to exist for two frames before being lit up. I plan on having a thinner band of light do the thing, and have 2-3 visible at a time. I'll leave the still-spinning letters untouched at first...

For the fade out I'll have it fade to white and dissolve into triangles.
To do: ??? Cow made my lovely avatar.

Offline Basketcase

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

Re: Animated warning text

Reply #18 on: December 22, 2011, 11:34:47 am
Quote from: me


Yeah I'm done with this.
To do: ??? Cow made my lovely avatar.

Offline API-Beast

  • 0010
  • *
  • Posts: 292
  • Karma: +0/-0
    • beast_pixels
    • http://pixeljoint.com/p/35725.htm
    • View Profile

Re: Animated warning text

Reply #19 on: December 22, 2011, 01:56:06 pm
Argh, my eyes!   :yell:


In different words: Thats way too much effect, its just annoying. I couldn't concentrate seeing that.

Offline Basketcase

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

Re: Animated warning text

Reply #20 on: December 22, 2011, 02:40:03 pm

alright
To do: ??? Cow made my lovely avatar.

Offline API-Beast

  • 0010
  • *
  • Posts: 292
  • Karma: +0/-0
    • beast_pixels
    • http://pixeljoint.com/p/35725.htm
    • View Profile

Re: Animated warning text

Reply #21 on: December 22, 2011, 02:55:03 pm
I think it would be best if you only play the shine effect once. After that still image.

Offline tehwexxl0rz

  • 0010
  • *
  • Posts: 446
  • Karma: +0/-0
  • Swing the bat.
    • ianwexl0rz
    • https://pixeljoint.com/p/15996.htm
    • View Profile
    • Ian Wexler | Game Developer

Re: Animated warning text

Reply #22 on: December 22, 2011, 06:45:46 pm
The single flash was much, much more effective. Repeating it just lessens the impact.

Offline Atnas

  • Moderator
  • 0100
  • *
  • Posts: 1074
  • Karma: +2/-0
  • very daijōbs
    • paintbread
    • paintbread
    • View Profile

Re: Animated warning text

Reply #23 on: December 22, 2011, 08:02:31 pm
3 should be the absolute max. I think a sort of ping pong back and forth once might also work well.

Offline slym

  • 0010
  • *
  • Posts: 192
  • Karma: +0/-0
    • View Profile
    • My Portfolio

Re: Animated warning text

Reply #24 on: December 25, 2011, 05:46:21 pm
I'd make it shake rather than flash more than once (What Atnas said would be best in my opinion).