Monday, May 20, 2013

Getting Flash to Talk to UDK - part 3


Capturing Keys -


This is a multi-part set up. You'll be setting up the code in Actionscript, as well as in Unreal Script later. Planning ahead here will save a ton of heartache later. Now any key you capture, can easily call a function back in unreal, if you need it for the purposes exec style functions (where the key press activates the function).

First set up the ability to capture keys. Near the top of your code, outside of any function, put in the following:


var keyboardInput:Object = new Object(); //holds keyboard input
Key.addListener(keyboardInput); //used to listen for key input.


For right now, we will focus on what needs to be done in actionscript. Here is an example from my code:


// when a key is pressed, execute this function.
keyboardInput.onKeyDown = function() 
{

    // store the keyboard input ASCII code inside 'keyPressed'.
    var keyPressed:Number = Key.getCode();


    // if TAB was pressed...
    if (keyPressed == 9 && menuLoc == "GameActive") 
    { 
        
        if (invshown == false && bPause == false)
{
    ShowInventory();
    trace("Inventory Shown");
}
else if (invshown == true && bPause == false)
{
         HideInventory();
    trace("Inventory Hidden");
        }
    }


}

This simply checks what state the game is in, and calls the correct function. But focus on the set up, and not the execution.

keyboardInput.onKeyDown = function() 
{
    // store the keyboard input ASCII code inside 'keyPressed'.
    var keyPressed:Number = Key.getCode();


All the key press events will occur after this and before the closing curly brace. As in the example, the Tab key is in there, so that right after:


HideInventory();
trace("Inventory Hidden");
}
    }

you would have

HideInventory();
trace("Inventory Hidden");
}
    }
    // if Escape was pressed...
    
    if (keyPressed == 27 && bPause == false && menuLoc == "GameActive") 
    {         

Now you'll notice that the keyPressed variable is compared to a number. These numbers can be found online, by doing a search for javascript keycodes.


So you would at the same time be keeping track of what keys you need, so that later on in unrealscript, you can capture those keys for flash.

That's pretty much it for capturing keys in actionscript. The other step in UDK will be done later on when we are working in UDK.

Monday, April 15, 2013

Getting Flash to Talk to UDK - part 2 - addendum

You may have noticed how I set up the movie file in the previous part. This is just to clear up some of the set up.

A) Create layers for each element of your UI. This will allow you to animate them, and lock them down later as you finish them.

B) Create a layer for actionscript. This makes it easy to find, and easy to label without arrows and what not getting in the way. I usually label it "as" in the movies inside the file, and "as_root" for the main one in the file.

C) Unless you want something to play or loop for ever, put a quick stop(); on the first line.

We're going to move on, implementing the one singular feature for now. Then we'll come back and look at spawning in new things.

I figured that you have some experience with Flash, so I'll assume you understand this. If you have questions, please ask it here.

If you have suggestions to clarify something or a better way of doing something, then please do so in the addendum. Thank you.

Sunday, April 14, 2013

Getting Flash to Talk to UDK - part 2

I've been planning out and outlining this for a while, not that it will make it much better, but I've spent so much time on projects, that I haven't had a chance to write out all the steps. I ended up breaking the steps out even further.


The Flash File

Planning Ahead -



It's always a good idea to know what you want to do already. Your GDD should have very precise requirements out of the HUD that you'll be working with, and as such, you can better plan, and prepare for the set up of the Flash file with a good GDD or goal in mind.

Now, my current project involved creating a HUD that would keep track of inventory, as well as display status messages, be the main menu and be an alternative to player interference and surprise. 

Animation -


It is best to have each MovieClip in the Flash file have its own animation. You'll be calling that animation using: with.

with (ExampleMovieClip)
{
     ExampleMovieClip.gotoAndPlay("ExampleMovieClipPlay");
}

To call a movie object inside a movie object:

with (ExampleMovieClip.SecondMovieClip)
{
     ExampleMovieClip.SecondMovieClip.gotoAndPlay("ExampleMovieClipPlay");
}

This is what you will include in any function that will require animating ExampleMovieClip or any movie clip you make. Note that "ExampleMovieClip" is the name of the instance of a movie clip, and that "ExampleMovieClipPlay" is a label inside that movie clip.

This code is telling Flash to find that specific instance of a movie clip, and find the label "ExampleMovieClipPlay" and to play that movie clip from there.

The way you use this depends on the situation, so I'll bring up what I did.

1) Scary Face

The concept is simple. Have a scary face show up when they don't expect it.

Execution: create a movie clip. Label the instance of it (click on the movie clip after placing it), as RightFace (or whatever, I used RightFace, to keep track of where it was). 




On the first frame put the actionscript

stop();


Change the alpha to 0 in the beginning, animate it however you want (start from the 2nd frame, leave the first frame as a stop with alpha 0. Have the alpha reset to 0 at the end of the animation.




Setting up for the function: Label the 2nd frame of animation as something that you will use for the other animations like this one, such as, "Scare" or "Play".






Create a function:

function ScaryFace()
{

     with (RightFace)
     {
          RightFace.gotoAndPlay("Scare");
     }

}

Now whenever you want to use ScaryFace(), just call it, and it will animate! You can call it from UDK, from a key press, randomly through a timer! Whatever!

This technique will be used throughout the project, so keep it in mind!

Friday, March 1, 2013

Getting Flash to Talk to UDK - part 1

Introduction -

I've been working on different Flash UIs in UDK for a few months now, and the evolution of what I could do before to now is pretty astounding. This is my third foray into the world of Scaleform and I have to say that I am feeling better and better about what I am doing.

My goal with this next series of posts will be to detail HOW I got Flash to work with UDK, and then go into what I did in Flash and what I did in UDK.

If anything, I'm hoping that I can have a series of tutorials that will guide would be newbie UI creators into what its like to create a HUD in Flash for use in their own UDK game.

There will be certain assumptions made during this process:

1) I assume that you have Flash. This is unfortunately an expensive requirement. Luckily, if you are a student, you can purchase Flash Professional 6 for $200. Or, if you are taking a one month class, you can "rent" flash for $20 a month.

2) I assume that you have a pretty recent version of UDK installed. As far as I am aware, this will work on version of November 2012 and February 2013. Those are the two version I've been using on these projects. This could work with an earlier version, but I have no guarantee of that.

3) I assume you have a good script editor for coding uScript. I use Note++. Some people use different IDEs, but I tend to hate how big they are. Note++ is fast, and does what I want it to do.

4) I assume you have done something in UDK and Flash before. Though I will do my best to tackle all that is absolutely necessary.

5) I assume basic coding/scripting and computer knowledge. If you have never scripted before, this may not be a good entry point. I will do my best to cover what is needed.

6) I assume you have an image editor that can output PNG files. Such as paint.net, gimp, or Photoshop. This tutorial will NOT cover this at all. The focus here is for Flash to UDK communications.

Setting Up Flash -

Setting up your Flash work environment is very important. Though future version of UDK may be able to work with Actionscript 3, the current set up, as far as I am aware, requires Actionscript 2.0 and Flash 8. This limits what can be done a bit, and also makes something more difficult. When looking for hints and additional help in Google, remember to ad AS2, Actionscript 2.0 or Flash to UDK to whatever it is you are searching for.

Under File, go to Publish Settings, and click the second tab on that option dialogue that opens up. Set the player version to Flash 8 and set actionscript to 2.0. It should be okay to leave the rest alone.



Next, you need to set up the canvas. The canvas should be at 30 fps, and the size I use is 1980x1080 (in uScript, you'll be making it scale). The size of all object should be to the power of 2 (2, 4, 8, 16, 32, 64, 128, 256, 512 etc). This is because UDK deals with it better. Example make an image 64x128.

I'll begin by adding base functionality to the menu, and once we have it working we'll move on to connecting it with UDK through uScript. Note, that my set up is different, as I own Flash on a Mac, and cannot test the way you could if you had it on a PC.

Creating the Flash file will be on the next installment.

Wednesday, January 30, 2013

Tetrahedron Twister - Now in Browser!



This is the prototype I linked earlier. Finally figured out how to put it in here.