Adding Your Images to Games

A coworker who is teaching Popfly to his daughter just asked me,

I'm working with my daughter who is working on a game and she wants to import a picture to be an actor.

How does she do that? And is there a wiki or other site to get these kinds of answers?

For once in my life, I have answers to both.

If you look in the upper right (next to your name) you’ll see the integrated help. That will open the Help window. clip_image002
From there, you’ll get context-sensitive help. If a topic isn’t covered in the sidebar, you can click on the more help section on “How Do I…?” which will take you to the online documentation on clip_image004
The page you’re looking for is linked to from several places – it’s called “How do I use uploaded files in my game?” and it’s here clip_image006
Once there, you’ll need to read the instructions, but they go like this. First, create a game (you’ve done this) and save it. Then upload the image. Go to the Game tab and on the right you’ll see the “Files” section. Click to add a file to your project, either from the web (e.g. from Flickr) or from your computer. Once it’s uploaded, save the project again.  I’m uploading john.PNG. clip_image008
Now click on the Scenes tab and click on Draw. Then click on “Switch to XAML.” The screen should look roughly like the one on the right. clip_image010
Next, add the XAML to include the file between the two <canvas> tags. In my case, I’ll add john.PNG. <Image Source="$base$/john.png" Canvas.Left="191" Canvas.Top="324" Width="200" Height="150"/> The Canvas.Left, Canvas.Top, Width, and Height control where the image will go and how large it will be. You’ll have to experiment to get it to the right position. clip_image012
Save the game and run it. My “game” looks like this. I’ve saved it as, but we have examples in our tutorials of how to do this as well – the Canada Quiz in particular.


Technorati Tags: Popfly,XAML,Games