In this tutorial I am going to attempt to show one way to present a cool terminal style auto typing effect. (Anyone old enough to remember the DOS game Hacker or maybe the movie Wargames!? ...awesome!!!...)
Online demo HERE
First of all, let me say.. THANK YOU Scirra! As a professional C#/Javascript coder... I truly appreciate this awesome software!
In saying that, I should also warn the readers that I have only been using this product for a few days so please feel free to correct any silly mistakes I may make in this tutorial.
Ok, let's get on with it! CAPX HERE
1) THE BACKGROUND
First off, lets create a new project and set our layer0 background color to 60,60,60 to give it a grayish background screen look.
2) THE TEXT OBJECT
Now double click on the canvas and create a text object. (place it anywhere for now).
Clear its Text settings, set the font to Courier size 48.
Set it's RGB value to 0, 153,0 -- you will need to choose the dropdown, then OTHER, then custom.
This will give our text a greenish DOS feel.
BTW - This is just a quick guideline. Feel free to tweak and make all these look better after we're done (as if I had to tell you that :) ).
3) MAKE YOUR CURSOR
Double click the canvas and add a Sprite object (anywhere).
In the edit box using the RESIZE tool...make your box 40 x 80. And fill it with a dark green color.
Now in the animation frames box, right click and ADD A FRAME.
Give yourself a second frame and with the rectangle tool...delete about 90% of the green box (so its clear on top). Make this one your second frame. (make sure to get rid of any empty frames)
Choose the Default animation now in the Animations box and set the settings to a speed of 3 and YES for loop...should look like this.
Close the image editor... lets set our objects to these positions.
TEXT set position to 67,86
CURSOR set position to 86, 115
4) Now to the logic! (my faves!!!)
Click over to your event sheet... right click on the surface and add these 3 global variables.
Now duplicate the logic in the pic below and I will explain it...
Its very simple really... every 0-5 (random) seconds & IF WE HAVE NOT REACHED THE END OF THE MESSAGE we do stuff...
A) -IF we have not started yet (started = 0) then we wait for 2 seconds...giving the viewer a chance to see the screen and cursor. (then starting ... setting started = 1)
B) -THEN we start by
Moving the cursor over one space (remember the timing here is random so it will give it a more HUMAN feel..should anyway)
Setting the text of our box to a certain number of letters from the message
Adding 1 to the messageLength so that the next time around we get the NEXT letter
And that is it!!!
NOTE & CONFUSION ON MY PART : First thing I want to suggest is to always use a MONOTYPE font so the space between each letter always stays the same. HOWEVER, I used a 48px font and assumed that my cursor could be 48px wide and that I could move it 48px with each iteration...however for some reason, these settings didnt work and I had to go with a smaller cursor and an X addition of only 38 ... so there's that ... anyone have an answer?
Anyway - thanks again Scirra! Awesome product and I will be purchasing it soon ... as soon as the Christmas sting has faded! ;-)