Help for the mathematically challenged

0 favourites
  • 15 posts
From the Asset Store
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
  • Hi All,

    Okay, so I wanted to recreate a 3d tunnel effect, like the animation I use in my game "Hexzul" (see here) or ( This was mainly to optimize the game, as up until now, I've been getting the tunnel effect by using a 1024 x 670 animation (x17 frames) - see image representation below.

    <img src="" border="0">

    At first I created a single 1024 x 670 sprite to represent each box (thin green line around all four sides and transparent in the middle) and just re-spawned it using "Every x seconds". It was pretty simple to set up, and I was able to scale the boxes (again using "Every x seconds") to create a tunnel effect. Unfortunately with so many large sprites on the screen everything seemed to slow down quite substantially.

    Then someone pointed out that I could just use lines rather than an entire box, and "stitch" them together. I've had a go with this approach, and I've managed to cobble together a rather shabby attempt (download capx). It kind of does what I want, but I just don't have the maths skills to get the lines to move together in the correct way.

    Could any of you maths geniuses (I know there are quite a few of you out there!) try to help me out please?

    Many thanks.

    <img src="smileys/smiley4.gif" border="0" align="middle">

  • Not seen your game 'Hexzul', so I am not 100% what type of

    tunnel effect you need....

    Anyway it is possible to create a basic tunnel effect using just

    3 frames-


    Hope this helps.

  • Capx - 124

    Aw man , you forgot to think out of the box ( Understood that one :D ) , now you just have to add the lines as non-moving objects ...

    P.S: Try to run the preview without changing anything and watch it for a bit , I swear you won't regret it ...

  • Whiteclaws damn, that gives me a headache lol

  • chrisbrobs,

    Thanks for the example. The tunnel in Hexzul is a little more clunky (as I wanted it to have a retro 80's feel).

    But your capx proves that I could do my animation with much fewer frames than I currently have, so I'll give that a try.

    Thanks again, you've been really helpful.

    <img src="smileys/smiley20.gif" border="0" align="middle" />

  • Whiteclaws,

    Thanks for the help, it really does mesmerize (I think I went in to a bit of a trance at one point)!

    I did initially try the same approach, but with a much larger sprite (1024 x 670), as I wanted it to look clean on larger screens. But I found that made it run quite slow, once I had a lot of sprites on the screen.

    Thanks again for the help though.

    <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Blacksmith, I made a small modification to Whiteclaws capx. Should be closer to what you want.


  • The bigger resolution images largely steal the performance and having a lot of them on screen multiply the performance loss , I suggest adding a destroy if is out of layout behavior to the line object + a little bit of variable tweaking ...

  • bon4ire,

    Unfortunately, even with the modifications it still runs at quite a slow frame rate (especially on mobiles).

    But thanks for the effort though, your help is appreciated   <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Whiteclaws,

    I did have a destroy outside of layout on my example already. But still exhibited quite a slow frame rate. Not sure if tweaking the variables would help that much really.

    That's why I was originally asking about using separate lines and joining them together somehow. Unfortunately I don't currently understand the maths it would take to make that happen.

    I guess I'll just have to stick with the animation for now, and hope that some tweaking will reduce its impact on the memory usage.

    Thanks again, it was a very trippy example!   <img src="smileys/smiley2.gif" border="0" align="middle" />

  • Blacksmith even changing the GrowthSpeed variable higher than 1?

  • bon4ire,

    Yes I'm afraid so, I'd need to use much bigger images than the ones in your example. I'm hoping to make it available on tablets as well as phones. And small sprites look a little blurry when they're sized up that much. But when I have that many large sprites all scaling up on screen, it really slows everything down.

    But thanks for trying!

  • Blacksmith - Not sure if you're interested in seeing another example or not, but since it was my suggestion in the first place, thought I'd give it a shot ;)

    I made heavy use of @Yann's easing functions and there are some settings you can adjust for speed and that sort of thing.

    Here's a preview of it: Retro Tunnel Preview

    And the .capx: Retro Tunnel capx

    (Haven't actually shared a capx before, so if I screwed something up, let me know!)

  • rogueNoodle,

    Wow that is fantastic, thank you so much! Now I've just got to try to pick it apart, so that I can learn what's going on.

    Wasn't sure if I'd be able to do this, so thanks again (double thumbs up for you!!)

    <img src="smileys/smiley20.gif" border="0" align="middle" /> <img src="smileys/smiley20.gif" border="0" align="middle" />

  • Blacksmith - No problem at all :) Any questions about it, let me know!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)