Image/font -> pixel zoom up

Discussion in 'Programming' started by The_Real_Olla, Jan 16, 2020.

  1. The_Real_Olla

    The_Real_Olla Member

    Joined:
    Jan 5, 2019
    Posts:
    14
    Hello,

    I am trying to figure out how to make a certain effect for my retro shooter game. Currently, when you take down waves of enemies flawlessly, I trigger an onscreen image (for example: PERFECT) which scales up and fades away, it looks alright but what I am really trying to archive is that it’s the space between the pixels (think Jeff Minter games like Tempest 2000) in the image that increasing instead. I’ve tried to do a number of things with getpixel, etc, but without any success. I am convinced an effect like this can be archived using a shader but I am not particular good at doing shader code, so I am a bit lost. Any help, suggestions, examples in doing such an effect would be highly appreciated.


    /Olla
     
  2. NightFrost

    NightFrost Member

    Joined:
    Jun 24, 2016
    Posts:
    2,064
    So you want to treat the text as if it were an image, and zoom it up slowly? The simplest method would be to add a sprite with that text, set origin to center, and draw it with draw_sprite_ext() to control scaling. PRO: easy to set up and use. CON: for every phrase that needs the effect you must have another sprite. If you're going to use the effect a lot, better alternative would be to have the game first draw the text to a surface and then draw the surface to screen while increasing its scale.
     
    The_Real_Olla likes this.
  3. TheouAegis

    TheouAegis Member

    Joined:
    Jul 3, 2016
    Posts:
    7,372
    Oh man, those old school 90s fonts... So much retro vibe there. lol

    A shader would be better, but I'm not sure if it's actually viable (and don't ask me how to do it) since you're going to have to render pixels.

    Take your text, render it to a surface at the start of the game, copy the surface to a buffer, then free the surface -- this is just the prep work. Then instead of drawing text, set the buffer position to 0 and loop through the buffer using buffer_u32, rendering each pixel to the screen at the proper coordinates which are derived by some algorithm you come up with. Sounds slow? That's why a shader would be better.

    I found links for the explosion effect in code for other languages, so have fun with that... The shearing would be easy with a shader, and there are a few examples of that floating around and even shader tutorials that deal with it.
     
    Last edited: Jan 16, 2020
    The_Real_Olla likes this.
  4. The_Real_Olla

    The_Real_Olla Member

    Joined:
    Jan 5, 2019
    Posts:
    14
    Hey NightFrost, Hello TheouAegis ... Thanks for info.. Yesh ... old school 80s/90s font effect is what I am looking for .. :) Some good suggestions there. I will try to explore this when I get home today. Yes, a shader would probably be the best way to do this but as I wrote, I am not so fit in doing shader code ... I made a quick mock-up in MS paint (just using a letter it should of course be a word).. the pixels should of course be squared which they aren't in my lame example :) just to be clear about what's I am looking for as I was a bit unclear in my original post, I think. :) I have searched and searched for examples on this effect, but haven't found anything hence my post.
     

    Attached Files:

  5. NightFrost

    NightFrost Member

    Joined:
    Jun 24, 2016
    Posts:
    2,064
    Aha, so exploding letters kind of effect. Not so simple effect then. Two ways come to mind immediately. One would be to have a small square sprite, which is the base element for all the letters. Then you draw it over and over to different positions to create letter shapes - you'd have some precalculated data of positions stored for this. You'd increase a multiplier variable every step and adjust positions with that as you draw, thus simulating an effect where they explode away from each other. Another way would be a shader, yes. First youd draw the original text to a surface, then send it to the shader as 2d sampler and the desired gap size. The shader would then draw the text, adding empty spaces where needed.

    The shader would be faster naturally but you'd need some proficiency in writing them to step the draw position in required manner.
     
    The_Real_Olla likes this.
  6. The_Real_Olla

    The_Real_Olla Member

    Joined:
    Jan 5, 2019
    Posts:
    14
    NightFrost, yes, I thought something like that myself. Scan through a bitmap/image and store precalc data in a buffer, then plot it onscreen with a 'space between pixels' variable that I can do stuff with. I think I will try to see if I can do that. The shader approach scares me a bit. :)
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice