For those of you who may not know, I am a huge Star Wars fan. With all of the excitement going on lately around The Force Awakens (non-spoiler: It was great!) and just a couple of days left before 2016, I wanted to do a quick project to brush up on some of my Unity UI skills – so I decided to recreate the scrolling Star Wars opening text for virtual reality! Below, you’ll find my process and code so that you can follow along – or download the project from GitHub here.

• Star Wars Scrolling Text Font
• Star Wars Scrolling Text Font Dafont

How to Create Star Wars Scrolling Text in PowerPoint Marshall Gunnell @MarshallG08 May 6, 2019, 11:23am EDT Creating an intro for your PowerPoint using the signature Star Wars text crawl during the opening scene is an excellent way to captivate your audience, getting them more interested and engaged in your presentation. Star Jedi is a high quality Disney font that is designed by Boba Fonts and is available for free download personal & Commercial Use. Do not miss the best fonts for one of the great classics, Star Wars. Let the fonts accompany you! Ready to personalize and share in Facebook and Twitter.

My Developer Environment

Operating System: Windows 10 64-bit

Oculus Runtime / SDK: 0.8.0 (for PC)

Unity 5.3.1

Let’s Build!

The first thing that you’re going to want to do is set up a new Unity project with the defaults set for 3D development. I included Cameras, Standard Assets, and Visual Studio Tools asset packages, but I didn’t really end up building out anything with the Standard Assets package, so it’s up to you if you want to include these in your project.

Once you have your blank Unity project and a new scene created, the first GameObject that you’ll want to add is an Event System. The Event System object is the foundation for creating user interfaces with Unity, so I created one that lined up with the camera and added a Canvas to the Event System to start off the UI. Since this is going to be used in VR, go ahead and change the Canvas Render Mode to ‘World Space’ and set the main camera as the Event Camera.

With a user interface that you’re adding to an application or game, you’ll probably have to change things around to fit your environment. For this little sample, I set my Canvas width to 70 and height to 20, the Z position to 10, and changed the ‘Dynamic Pixels Per Unit’ to 10 instead of the default 1. Of course, since the Star Wars opener is at an angle, I also changed the rotation on the X axis to 55. You can change this value to whatever you’d like, since the script that we’re going to add will adjust itself to whatever this value is.

You may need to play with the exact values for width and height to suit your own application

The next thing that I went ahead and did was add a panel to the canvas and change the background to black. There’s a little transparency to the panel by default, and when we add in the skybox at the end, this won’t be visible, but it was a good temporary step for making sure that all of the canvas elements were easy to see during testing. For now, this is the only change to make, but later on we’ll add our scroll script here.

Next, it’s time for the primary focus: the text! From the GameObject -> UI menu, add your text item as a child element of the panel. I made the width of the text just a little bit smaller than the Canvas (width = 50), but kept the height the same. Because we changed the dynamic pixel component on the Canvas, we can get away with making our text smaller, so I changed the font size on my text item to 3. Under Paragraph, make sure that the alignment is set to ‘center’ and ‘top’ for placement, and that your horizontal and vertical overflow are set to ‘wrap’ and ‘overflow’, respectively. Finally, change the text color to yellow, and your text will slowly start to be shaping up to be strong with the Force!

This image was taken before I decided on the final width of the panel – play around to make it your own!

Now that we have the basic GameObject components done, it’s time to add in the movement script. We want our text to scroll slowly up the slope drawn along the Z axis by our text rotation, and I decided that the cleanest way to do this was to attach the script to the Panel. This way, if we wanted to add other elements to scroll (such as a larger title text), we wouldn’t have to have multiple scrolling scripts potentially getting out of sync. I also didn’t want to attach it to the Canvas itself, because this would change where the whole text was located in the world, rather than providing a comfortable fixed location.

On the Panel object, create a new script (I use C#, but the script can easily be adapted for UnityScript) and call it ‘ScrollScript’. Save the script and open it up in your editor of choice – I use Visual Studio 2015 Community edition, which is available for free. In the script, I created two private variables: isScrolling and rotation, at the start of the ScrollScript class.

To keep things tidy, the only thing in my Start() function is a method called Setup(), which I use to initialize my private variables. You can just add the following lines directly into the startup method if you prefer, or any other methods you might be calling at runtime if you’re working from an existing script.

There’s one part here that I probably should have changed, but since this is a learning opportunity, I decided to leave it in for now. When I’m getting the rotation value from the parent (Canvas) of the Panel, I set it in “degrees” – in this case, 55. If you use the line gameObject.GetComponentInParent<Transform>().rotation.x, this value is not 55, because transform.rotation returns a different quaternion value. You can read more about this in the Unity Transform documentation reference, and it’s why I use the .eulerAnglesproperty instead.

After setting up the initial values, the only thing left to do for our script is add in the scrolling element, which you’ll want to place in Update() so that it gets called on every frame. This means doing a little bit of math, since we aren’t moving our text along one axis, but along the slope we created by changing the angle of the text. Our slope can be determined by calculating the sine and cosine of the angle we rotated our text on – which we don’t actually end up needing directly, but was helpful for debugging.

Yes, I did forget how to slope for just a second here

Before I actually update the text, I added in two input checks for some helpful functionality: the ability for the user to press “Escape” to quit the application, and the ability to stop and start the scrolling with the ‘A’ key. These are pretty simple checks in Unity, and just require a couple of extra if statements:

Finally, I use the sine and cosine of our angle through the Mathf class to calculate the new UI position of our Panel element from its current position, and update accordingly. Our Cartesian coordinates are on the Y axis and Z axis, so we update these to their new position by adding a scaled version of the sine and cosine values of our rotation. To change the speed, update .01f to a different scalar.

The whole script is fairly short:

Finally, there are just a couple of last things to do to finish off our scene. Because we’re trying to create an immersive experience that replicates the sensation of being in the Star Wars opening crawl, we want to add a skybox. Since we’re just doing a simple star-filled space background, you can use an existing skybox that you already have, or make your own. I picked a basic star image and did a few edits in Gimp 2 to make it a good texture for a skybox cube:

• Desaturate colors to mimic the feeling of the original Star Wars crawl
• Crop to a 1024×1024 cube
• Run the ‘Make Seamless’ filter to avoid showing the edges of the box on each side

Once you have an image you’d like, go back to Unity and drag your star image into your project. In the Assets inspector, right click and create a new material called ‘Skybox-Stars’. Change the material shader to Skybox->6 Sided and set your star image to each of the textures on the side. Since we made the picture seamless, you can use the same .PNG for each side. Open the lighting window, and where you have the default skybox, change this to your new Skybox-Stars material.

The last thing that I did to add to the overall feel of the Star Wars text was to change the text font to a new font that felt a little closer to Universa, the font used in the movies themselves. Since we’re just doing a quick project to distribute, I went for a free font from Google Fonts called Oswald.

To add a Google font into Unity:

1. Go to www.google.com/fonts and find a font that you’d like
2. Add the font to your collection
3. Click the tiny arrow at the top and ignore Google telling you that you don’t have to download the font
4. Click ‘Download as Zip’
5. Extract the font into your Assets folder (I like to give it a folder of its own with the font name)

In this Photoshop tutorial, I’m going to show you how to create the title to Star Wars. We are going to make the perspective text and actually animate it, so that it moves just like at the beginning of all the Star Wars movies. We are going to do all of this in Photoshop CS6 or Photoshop CC. If you have an earlier version of Photoshop, you can still make the text effect, but you will need CS6 or CC to make the animation.

I have also included the PSD that you can download for free at the end of this tutorial. PhotoshopCAFE: doing what other tutorial sites don’t 🙂 Enjoy!

Step 1 – Creating the Text with the Star Wars font

Start with a new blank document. Set the background color to black.

Step 2

We are going to create some paragraph text.

Click the type tool

Choose bright yellow as the color. The font used on Star Wars is Franklin Gothic.

Step 3

Now, we will create a body of text. To create paragraph text, click and drag a box around the area where you want the text to go.

Either type, or paste in some text.

Here is the nonsense text used in this block, if you want to, just cut and paste it…

Step 4

We now want to add some perspective to the text. You will notice that you can’t add perspective to a paragraph of text without rasterizing it. Or can you? I have figured out a sneaky way of doing it, that is the key to this technique working. (I thank my days as a Flash designer for figuring out this kind of stuff).

Right click on the text’s Thumbnail in the Layers panel and choose “Convert to Smart Object”

Step 5. making the Star Wars Perspective text

Now, we can transform this smart object.

With the text Smart Object active in the Layers panel, Press Cmd/Ctrl+T for free transform

Right Click and choose Perspective.

Step 6

Drag the top corner in to make a perspective shape.

Press enter to apply.

Step 7

We have now made an image of the Star wars perspective text effect. This is where other tutorials end (Hopefully, Youtubers won’t rip off this tutorial, like they have a lot of my other tutorials, so sad). But this is where we kick it up a gear. We are going to make it move!

Animating the Star Wars Intro Perspective text in Photoshop CS6 or CC.

You can use any version of Photoshop to get to where we are right now, but you will need CS6 or CC to animate it.

Step 8

Open the timeline from the Window>Timeline menu if it’s not visible.

Right in the middle of the Timeline, you will see a button that says “Create Video Timeline.” Go ahead and click it

Step 9

Star Wars Scrolling Text Font

You will now see a timeline appear in Photoshop.

I know you are tempted to try and animate things right now, but resist the urge. You won’t get a decent result animating it on this timeline.

Step 10

This is where the magic of a nested animation comes in handy. (I wrote a book on this kind of stuff in Flash (How to Wow With Flash) and I can adapt these techniques to work in Photoshop.

Find our Smart Object with the text and double click the thumbnail

Step 11

You will notice that a new document opens with the contents of the smart object displayed. This is where we are going to do our animation.

Star Wars Scrolling Text Font Dafont

Step 12

Go to the timeline and click the arrow on the left of the track name, to reveal the animation options.

Click the stopwatch icon to the left of the word Transform. This will create a yellow diamond which is an animation keyframe.

Step 13

On the document window, drag the text down to the bottom of the screen.

(Tip: Hold down the shift key as you drag to constrain the movement to a vertical alignment). We are setting the beginning of the animation

Step 14

Now for the end

Move the playhead to the end of the timeline, by dragging it.

Step 15

Drag the text all the way up (while holding down the Shift key). We are moving it to the end position of the animation.

Step 16

You will notice that another animation keyframe is automatically created.

Step 17

If you press the play button in the timeline (Or press the spacebar) you will notice that the text now animates from the bottom to the top of the window.

Step 18

Now for the magic!

Press Cmd/Ctrl+S to save the document (contents of smart object).

Close this window and go back to your starting document where you first created the text.

Press the spacebar / play button in the timeline

You will now see the star wars effect working!

I don’t know about you, but I think this is pretty cool.

If you want to export this as a video do this:

Choose File>Render Video

Select Folder (name the video and select where you want it to be saved to)

Choose H.264 as the format

Preset: High Quality

Then press render

The video will now be created in the folder you chose. Be patient, it may take a while

I have more Photoshop animation tutorials here

https://photoshopcafe.com/wp-content/uploads/2014/11/Screen-Shot-2015-12-08-at-12.39.04-PM.jpg

I have done a lot of experimenting with video and animation in Photoshop and had the huge honor of presenting some of my techniques for Adobe at their world headquarters (several times), as well as at Adobe Max (the Adobe World Conference).

If you want to get deeper into what you can do in Photoshop with Video and animation check out the 2 premium videos that I have created. Video in Photoshop will get your feet wet and teach you the range of things you can do in Photoshop (perfect for a beginner). Then check out Making Movies in Photoshop, which picks up where Photoshop and Video leaves of. I have also written a book, Video in Photoshop with Peachpit Press that you can find at bookstores.

Thanks so much for checking out this tutorial!
Download the PSD here

Add a comment! See you at the CAFE

Colin Smith

CS6 Superguide

All the CS6 information and more is available as a PDF magazine called the CS6 Superguide. If you’re on our list, you will receive it free by email as soon as it’s available. If not, sign up now and get the CS6 Superguide for free. Or click the image below.