Chrome Store Manifest

1. {
2. "app": {
3. "launch": {
4. "local_path": "TetrahedronTwister.html"
5. }
6. },
7. "icons": { "16": "logo16.png",
8. "128": "logo128.png" },
9. "manifest_version": 2,
10. "minimum_chrome_version": "23",
11. "name": "Name of Your App or Game Here",
12. "offline_enabled": true,
13. "permissions": [ "storage" ],
14. "version": "1.0.3"
15. }

 So here's an example of what the manifest will look like. You'll save it as manifest.json and its just a simple text file.  So what do we have going here?

Declare what to open:

1  {
2     "app": {
3        "launch": {
4           "local_path": "NameOfYourWebUsually____index.html"
5        }
6     },

or if you want one of those "desktop" looking apps:

1  {
2     "app": {
3        "background": {
4           "scripts": "main.js"
5        }
6     },

main.js:

1. /**
2. * Listens for the app launching then creates the window
3. *
4. * @see http://developer.chrome.com/trunk/apps/app.runtime.html
5. * @see http://developer.chrome.com/trunk/apps/app.window.html
6. */
7. chrome.app.runtime.onLaunched.addListener(function() {
8. // Center window on screen.
9. var screenWidth = screen.availWidth;
10. var screenHeight = screen.availHeight;
11. var width = 1280; //Size of your game's screen resolution's width, add space for ads
12. var height = 720; //Size of your game's screen resolution's height, add space for ads
13. chrome.app.window.create('NameOfYourWebUsually____index.html', {
14. bounds: {
15. width: width,
16. height: height,
17. left: Math.round((screenWidth-width)/2),
18. top: Math.round((screenHeight-height)/2)
19. }
20. });
21. });

Next is the icons. This is simply letting it know the name of the png files you are using. Make two of them. One will be 16x16 and the other will be 128x128. Keep manifest version and chrome version as is unless you need a newer version of chrome. Manifest needs to be 2 to use the main.js example. Name is as self explanatory as possible.

Offline enabled doesn't need to be there if you are pointing to a page on your server, but if you are submitting the whole thing to the app store to be stored on their servers, then you do this so that the game will download to their computer and they won't have to connect online to play the game unless it does connection tests etc.

Permissions has a long list on their website, but I used "storage" for the ability to save in the future.

Finally version is your current version and should be updated each and every time.

Kill your Darlings

Sometimes you can feel that something is wrong with a design, concept or story, without knowing what it is. On some gut level you feel that what you are doing is not beneficial. But how do you transition from gut feeling to productivity?

You see, when your gut is telling you that something is off, it can be difficult to work. Authors refer to it as writer's block. It is a conundrum that has to be resolved so that the work can be the best it can be. Sometimes it will require rework or scrapping a project, but the sooner you realize what is wrong, the sooner you can fix it.

How this May Progress:

Procrastination -

Perhaps the one that can be the hardest to identify. If you procrastinate already, it can be difficult to identify your normal procrastination from that resulting from a problem. This procrastination occurs because you have no solution for the problem, yet you do not quite understand that the reason you're doing this is because of that lack of solution.

Solving Easier Problems -

That is to say, that instead of tackling the big mess, you spend time clearing out your inbox, responding to twitter, etc etc.

Essentially, you do not want to tackle the problem, you are aware of it, and so you fill your time with other things that "have to be done", but are of lesser priority.

Writing or Talking about the fact that you are Procrastinating or Solving Easier Problems -
You are now addressing the issue that there is a problem. You are talking to other people in an effort to find a way to save that problem, or to finally come to the conclusion, that it has to be resolved some how.

Solving the Problem, or Killing It -

And here it is, the whole point of this mess. If you can't solve the problem, then you have to come to terms with killing it off.

How to Kill:

Combine it with something else -

Maybe the character is a bit redundant, maybe their role can be merged with another. Perhaps the mechanic is just not interesting enough by itself. It could be that you don't need jumping in the game, so you can just put any jumping with the other Quick Time events in the game. Have it be context sensitive like other interaction points in the game instead.

Remove it entirely -

Is the scene causing more trouble than its worth? Sometimes, going back and rewriting, or recreating a room is better than trying to shove something where it doesn't belong. The best authors have every scene progressing multiple things at once (character, story, setting up a Chekov's gun). Similarly every area of a game, should be exploring the game world narrative, the character narrative, and the player narrative.

When thinking of moving from controls to touch gameplay, I wondered if I should keep the character icon, or if I could remove it entirely instead of animating it for touch. Sometimes, its better to not waste time on additional animations, while other times, the investment allows the game to feel more "juicy". Think it through and make the decision.

Change its location -

Sometimes a scene doesn't work because it hasn't been set up. Maybe make the scene take place later on, and have the current moment set up that payoff. In a game, you may need to have a room or two where the player can safely play with a new mechanic. You may feel that you have to rush it, because the level is already built, but you should evaluate the space, and attempt to script around this, or simply move the challenge to a later spot.

In the end:

Solutions vary based on why you have to kill your darling. Hopefully, this will at least get you back on track to solving your problem. Good luck!

Getting Flash to Talk to UDK - part 4

Talking to Unreal Script -


In as_base, outside of any function, you can simply put:


import flash.external.ExternalInterface;


This is the standard way of getting Flash to talk to what is containing it. In this case the UDK script that will be set up later.


ExternalInterface.call("UnrealScriptFunction");


This will call the Unreal Script function by name. So that, MyFunction(), 
is called by putting:


ExternalInterface.call("MyFunction");

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.



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.

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!

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.