News

Poor Bear Update 4: Collision Detection

I have been working on adding tricks to PoorBear over the last week. Trevor has sent us a ton of crazy animations for tricks (I will try and throw up a video preview of some of them soon) as a result, I was in desperate need of a way to generate collision verts in a manner other than plotting them by hand (yeah, I plotted and translated the verts for one animation by hand and it took about an hour). I will go over the method I used to solve this problem.

The problem

I am using the Chipmunk physics engine on PoorBear and very basic collision shapes for all objects to try and keep it as fast as possible. You can make very complex objects with Chipmunk, combining many circles and polygons, but I feel that a single convex poly will provide accurate enough collision for this particular game. So, PoorBear’s body and scooter are represented with seven verts which are depicted by the orange dots below:

Up until we decided to add tricks to the game these vertices were all that was needed to provide collision detection for PoorBear’s body and scooter. The only variation in the animation was the movement of his scarf which didn’t need any collision detection so the verts remained static. Since we want to be able to do some pretty crazy tricks, these verts are no longer sufficient because the trick animations aren’t close to the shape of these verts. For example, this is a frame from one of the tricks:

As you can see, not only is it a totally different shape but the image is a different size and the wheels and shocks of the scooter are also included. This particular animation has ten frames and each frame is different enough to warrant unique collision verts. We have around 15 different trick animations with as many as 40 frames each which is why it became unrealistic to plot the verts by hand.

I browsed the internet for advice on how to solve this problem, but being new to game development I wasn’t even sure what to search for. Someone mentioned to be that I could use a single color image to generate terrain when I was working on the level editor for PoorBear so I started thinking how I could implement something like that and apply it to this problem. The solution turned out to be simpler than I had imagined and has saved me a ton of time.

The solution

My solution was to open each frame in Photoshop, create a new blank layer, and draw a 1px black (could be any color) dot where I wanted each vert to be. Then simply hide the original layer and save the layer with the dots to a file. Then I wrote a little script with my scripting language of choice, Python, to grab each pixel and convert them to coordinates that I can use with the physics engine. I have since extended the script so that I can generate the verts for multiple frames and animations at once because all the animations for PoorBear are complied into 1024×1024 images to cut down on the number of textures being swapped. However, I will just go over the basic steps of generating verts for a single image.

Below is sample of the previous image with several points drawn to form a loose polygon for collision detection. The points are overlaid on the image so that it is obvious what they represent and the points are large for the sake of clarity. The red dots have to be 1px on the real thing.

Once the verts are pulled out of the image and converted to something the physics engine can understand, they will represent something like the following in the game:

The script

There is a great image handling module for Python called Python Imaging Library (PIL) which is required for this code to work.

First we need to open the image saved from photoshop and pull out the pixels that were drawn. This can be done with the following code:

def grab_points():
image = Image.open("/path/to/image/animation0000.png")
pixels = image.load()
width = image.size[0] # the size property is a tuple (width, height)
height = image.size[1]
points = []

for x in xrange(width):
for y in xrange(height):
if pixels[x, y][0] == 255: # could just as easily detect any color
# pixels[x, y] returns the tuple (R, G, B)
points.append([x,y])

This code opens the image and loads the pixel data into memory and steps through each pixel, adding the ones with a red channel value of 255 to the points list. We could have also used a list comprehension which most likely runs more efficiently but is considerably less readable. This is what it would look like:

def grab_points():
image = Image.open("/path/to/image/animation0000.png")
pixels = image.load()

points = [[x,y] for x in xrange(image.size[0) for y in xrange(image.size[1]) if pixels[x, y][0] == 0]

Now that we have the location of all the pixels we drew in Photoshop, we need to convert them to something the physics engine can understand. Getting the pixel data was very simple thanks to PIL and at this step these points could be used for any physics engine with the right translations. These next steps will be more and more specific to my situation (Chimpmunk physics and the iPhone) but can be adjusted to most any project.

Chipmunk expects the verts to be in clockwise order and to form a convex poly. Currently, the verts are ordered by their x value. Given the image below, we need the verts in the order ABCDE but they are in the order ABECD right now.

I developed a simple algorithm which arranges the verts in the correct order, it has four basic steps:

  • 1. Iterate over all verts excluding the first and last
  • 2. Remove the verts with a y value less that half the height of the image, saving them in a temporary list
  • 3. Reverse the order of the temporary list
  • 4. Append the temporary list onto the original list

This is the code that does that:

def sort_points(points):
length = len(points) - 1
temp = []

i = 1
while i < length:
y = points[i][1]
if y > HEIGHT / 2:
temp.append(points.pop(i))
length -= 1 # we are editing the list in place. since
# we popped a value, decrement the length
else: i += 1

temp.reverse()

[points.append(point) for point in temp]

At this point, we have pulled the pixel data out of the original image and sorted the points in an order that the physics engine will understand. Now we just need to translate the points to the coordinate system used by the physics engine. The pixels were stored linearly in the pixels list where the first pixel in the list represented the top left pixel of the image and the last represented the bottom right pixel. This can logically be thought of as a coordinate system with the origin in the top left and the positive y-axis growing downwards. Chipmunk uses the traditional coordinate system with the origin located in the center. We just need to loop back over every point and transform them to coordinates Chipmunk understands. This code will do that:

def transform_points(points):
for point in points:
x = point[0]
y = point[1]
point[0] = x - OFFSET_X if x > OFFSET_X else (OFFSET_X - x) * -1
point[1] = (y - OFFSET_Y) * -1 if y > OFFSET_Y else OFFSET_Y - y

Now we have the list in an order and format that Chipmunk can use. Being that PoorBear is running on the iPhone, I just format this data to resemble a multidimensional C array and copy/paste it over into the code for the game. There are better ways to get the data over but copy/pasting is good enough for now.

The full script is below, I just chained each function together for simplicity.

from PIL import Image

OFFSET_X = 75 # image width / 2
OFFSET_Y = 75 # image height / 2

def grab_points():
image = Image.open("/path/to/image/animation0000.png")
pixels = image.load()

points = [[x,y] for x in xrange(image.size[0]) for y in xrange(image.size[1]) if pixels[x, y][0] == 0]

sort_points(points)

def sort_points(points):
length = len(points) - 1
temp = []

i = 1
while i < length:
y = points[i][1]
if y > OFFSET_Y:
temp.append(points.pop(i))
length -= 1
else: i += 1

temp.reverse()

[points.append(point) for point in temp]

transform_points(points)

def transform_points(points):
for point in points:
x = point[0]
y = point[1]
point[0] = x - OFFSET_X if x > OFFSET_X else (OFFSET_X - x) * -1
point[1] = (y - OFFSET_Y) * -1 if y > OFFSET_Y else OFFSET_Y - y

# format the list if needed
file = open ('output.txt', 'w')
file.write (points)
file.close()

grab_points()

Poor Bear Update 3: Development Progress

From our last post, you got a glimpse into Trevor’s mind and where things were headed from a design standpoint. This update shows the concrete transition of those elements into the game. The title screen and elements have been incorporated, along with stunt recognition (flips, wheelies), item collection, and finer game controls.

Help make Poor Happy!

As you can tell, Poor Bear’s life is starting to hype up, but we have him running in different directions. He is a little confused and we’d like your input. How? Well we’ve played with different goals for Poor from beat the buzzer to collect and score. What do you think would make Poor fun? Either of those? A combination? Or something else? We have tons of ideas, but would like to know what you think in terms of the fundamental game play. Please share your thoughts in the comments or with us directly!

Poor Bear Stage 2: Design

Project Poor Bear is shaping up pretty nicely, with every day bringing in a little more “flair”. Not to leave you in the dark we wanted to post some of the design progress and process. In addition, Trevor the man behind the “flair” kindly took a step back to share some insight into the origins of his ideas for the game and process. Below are images and direct excerpts from Trevor’s mind, enjoy!

“The idea behind project poor bear is to mesh a couple of my favorite ideas with the awesome game engine Dreamsocket came up with. First, I love the idea of making a monumental escape from work. I think anyone can relate to that. Here we have a bear who is good at what he does, loves to do his thing, but is stuck inside the unrelenting system (the big top) that sucks the fun out of his work. Sound like your life? The next idea I’ve incorporated is one I’ve been sitting on for a while. As a kid, I used to skate board. Trust me, I sucked… real bad. Even though I didn’t have any thrashing skillz, I could imagine the possibilities. I would always look up at the power lines and imagine ridding a skate board, or bike, or rocket boots on the power lines. Man, that would be so cool. I don’t think there could be a better escape route for our high wire bear. Of course we can’t just let our poor bear ride off into the sunset all golden parachute style. We have included a few challenges that should make for an interesting ride. 🙂

For the overall look, I wanted to make something that was just really fun to to interact with. I was initially going to make something all stylistic and out there, but it has been a while since I just made something tat felt cartoony. It’s almost a bad word these days. “CARTOONY.” Yeah, I feel bad even typing it. Well, I’m glad I did, because I think it really has a nice goofy look.”

Splash screen development

The development of the splash screen from a hand-drawn image to the (almost) completed image.


In-game assets

Potential objects you can expect to see in the game, from deadly barbed wire to not-so deadly squirrels.

Level one intro video

A sample intro/theme video we are using to defined the game. It shows Poor Bear making his death defying escape from the circus.

Kenny Speaking at NAB2009 on Games and TV Collaborations.

I was asked, agreed, and received confirmation that I will be speaking at the NAB conference in Vegas this month. The presentation/panel is titled “Game & TV Collaborations” and is focused on solutions that integrate games with video based entertainment. I will be showing off the Playstation Megasode that we built a few years back and participating in the subject discussion.

The presentation is slated for Thursday April 23 at 10:15.
You can find all the details here.

It should be quite interesting presenting at NAB, since the crowd is so different than a lot of the places I speak. It also marks my first attendance to the event, so I’d love to hear feedback from others that have attended in years past.

Annoucing Project Codename: Poor Bear

The iPhone bug bit and we have started working on a side project code named POOR BEAR. The project is a small iPhone game collaboration between the folks at Dreamsocket and <a href=”http://tvmstudio.com/” target=”_blank”>Trevor Van Meter</a>, who we consider friend of the family. For those who aren’t familiar with Trevor, you may remember his game <a href=”http://trevorvanmeter.com/flyguy/” target=”_blank”>Fly Guy</a> that garnered a lot of praise. Trev and I (Kenny) actually went to school together and were part of the same crew of friends, so we have roots. Personally, I look at him like a renaissance guy when it comes to illustration work. He literally does it all: cartoons, toys, comics, games, you name it. Needless to say, we are excited to be working together. Right Trev 😉

Plot

Trevor is working out the dynamics of POOR BEAR’s story line and it will evolve as we progress. Nothing is nailed in stone, but we have our basics. Our main character is a circus bear who rides bikes on tight ropes. Pretty hype already, huh? Who doesn’t love bears on bikes??? The game starts with our fearless character blasting out of a circus tent and landing on some power lines. He has some where he has to go, and he has to get there fast, so it is up to you to help him get there. A side scrolling bearrific race against time!

Current State

<div style=”width: 500px”><object type=”application/x-shockwave-flash” data=”http://dreamsocket.com/files/global/swf/mediaplayer.swf” width=”500″ height=”370″ id=”swfobject-1″ style=”visibility: visible; “><param name=”allowFullScreen” value=”true”><param name=”base” value=”http:/dreamsocket.com/files/global/swf/”><param name=”bgcolor” value=”#000000″><param name=”type” value=”movie”><param name=”flashvars” value=”file=http://dreamsocket.com/files/news/2009/03/02/poorbear.stage.2/video.flv&amp;image=http://dreamsocket.com/files/news/2009/03/02/poorbear.stage.2/poorbear.jpg&amp;google_analytics_id=UA-7275490-1″></object></div>

You can see from the video above, our development started by just getting basic mechanics working in the game along with a few art elements and menu screens. Some how the luck of the Irish hit, and we already have our fearless hero iPhone ready and controllable via the accelormeter and screen interaction. Tilting the phone to either side controls balance, touching the front of the phone speeds him up, and touching the back slows him down. Although some of the game elements are limited now, they along with the terrain are getting generated from a custom level editor we built in AIR. This gives us the ability to really map out and throw things in pretty rapidly. Expect good things 😉

Future

Moving forward, there are many hours of work left at this point. We still need to settle on layouts for all the menus and screens, get art for them, add sound effects, add background music, and create levels for the game. Perhaps one of the most important tasks left is to implement a scoring system. We have not ironed out the details yet but are considering making the levels time-limited and scoring based on quickness of MR BEAR. If we go this route, things like power-ups via time bonuses and speed boosts come to mind. Finally but not least, our bear FLIPS, yes he FLIPS while jumping his bike! Obviously, we might have to take that into account too!

All that said, welcome to PROJECT POOR BEAR. Expect us to post our process and progress here, so you can follow along and add your 2 cents into the game. Help us shape it into something great. We want POOR BEAR to pull you into the bears shoes and have you craving to play!

Teams, Chad Fuller, and Business Investments

Owning and running a business, the most important elements to your company are your image and the people working with you. This is even more important when you are a smaller business. If you are surrounding by the best of the best, that becomes the perception of what your company is. A small agile company composed of experts is a lot different than a large company with a few experts and a lot of worker bees. Both are valid models and neither is right or wrong. I opt for the quality over quantity approach, regardless of the income difference.

Therefore, when looking for folks to work on projects or to join the team, I look for people that are:

  • a) smarter than I am
  • b) completely devoted
  • c) care

It’s a decision that I don’t take lightly since I’m essentially asking someone to join a “family of friends”. That’s how I view work. It is part of your life, the people around you are part of your life, and you should surround yourself with those that bring out the best in you and themselves.

Chad Fuller

Last June, Mr. Chad Fuller sent me a note mentioning that he was moving to Atlanta. I knew Chad well, knew how smart he was, but also knew that he didn’t have any work experience. Point blank, experience is huge for us. Due to the positioning of Dreamsocket, we typically receive jobs I would refer to as high experience work. Thus, we can’t have people work on the projects who don’t know the technologies better than they know their own name. It is our position and what we’ve built the business on it. So Chad was in a way a gamble. Obviously there is risk with any gamble. You either win or lose. However, I took a pretty calculated gamble and came out ahead…. way ahead. If I were in Vegas, I would probably be the owner of the Wynn right now ;).

How did I win? Instead of throwing projects at Chad he would tear his hair out with, I decided to invest in him and the company. Chad’s first project was dreamsocket.com. If you haven’t looked at the site yet I highly advise that you do. Not out of self promotion, but to see what he accomplished. Before the project, Chad had never touched HTML or built a website. After the project he could boast a site that included a store front, live docs, bug tracker, and more all under one dynamic system. Needless to say, I’m more than impressed. Being able to own and shape it himself, Chad really was able to take value in his creation and learn a lot (at least I think he did ;)).

Investments

Since the site was an internal project, it was an investment. We invested in defining our image more concretely, creating a way to extend our business, and developing ole Chad. Personally, I know what its like to run in his shoes. Developers that care want to learn as much as they possibly can, to work on great things, and just enjoy what they do. It felt really good to give him a project that he could call his own, mold it, and learn from. That is really what being a business owner can do for you, it can help you help others.

As much as the business will let me, that is what I intend to do. Invest in the folks around me. If your folks have passion, let them run with it as much as you are able to afford. Your workers will grow in strength, which will in turn mean that you get an experience level you couldn’t get any other way. On that note, Chad got the IPhone bug and I’m letting him get all over it. It means diversification and it means he continues dealing with things he is really excited about. Wait and see what he’s got running ;).

Look for big things on Chad’s blog and our site

What is Dreamsocket?

Dreamsocket is a software company located in Atlanta, GA, focused on media and entertainment industry solutions for the web, desktop and mobile platforms.

We have built ground breaking software for clients including CNN, Disney, Cartoon Network, Adult Swim, NBA, PGA, Scripps Networks, SonyBMG, Rolling Stone, NASCAR, CBS, Barnes and Noble, Motorola and IBM. Our award-winning work has been featured in the New York Times and various web publications.

Deleted: We are a group of diverse individuals, but together we share one dream. We wish to do great things and push our talents as far as they will take us.

Deleted: Who is behind Dreamsocket?

Deleted: I guess it is best to start with letting you know who I am. My name is Kenny Bunch. I am a programmer, dreamer and founder of Dreamsocket. Growing up, I created my own GI Joe vehicles out of scrap cardboard, started a snowboard clothing company at 15 years old, traveled the US with a skateboard and had a lot of fun just enjoying life. I never would have guessed that I would end up as a programmer. Yet, it has always been part of my story.

If you had come to me when I was an 8 years old playing on an Adam personal computer, I would have shown you some crazy BASIC games that I wrote with my older brother. In college, I would have tried to persuade you to test out the latest and greatest media applications I was programming in order to edit some skateboard videos. Come to me now and I’m essentially showing and saying the same thing. Fate has given me direction, and I’ve followed with a smile.

So yes, I have been extremely lucky to have been able to make a career out of something I love. Coming from a small town where factory jobs were the norm, my life is all a dream. The fact that I started out as a developer at some of the biggest companies in the world — CNN, Cartoon Network and Bell South– blows my mind. I cherished each of those opportunities. But, when a dream calls, you have to keep moving towards it. When the time came to start a company, I questioned if I was crazy, doubted what I was doing and was scared out of my mind when I left. My decision was always based on the fact that I had dreams that I wanted to accomplish, and I had to follow them.

Why am I telling you all of this? Quite simply, because that is the foundation of Dreamsocket . Even though we’ve legally been a software company for over three years, we don’t view what we have as a company. Everyone here views it as a destiny and a gateway to our dreams. I know those are strong words, but Dreamsocket really is a place built from the heart. We have great respect for those around us and treat every opportunity as a gift. We want to do great things in our work and in our actions.

Dreamsocket’s philanthropic pledge

Deleted: Dreamsocket was founded with the aid and support of a great number of generous individuals. We have been fortunate enough to have a community that has allowed us to thrive and become who we were meant to be. We want to provide the same opportunities to others and genuinely make the world a better place. We view our employees, vendors and customers as partners in our dreams. Therefore, we want to offer them the opportunity to participate in our vision of a better future for all humankind. Through our philanthropic program, for every service contract we enter, we will make a donation to a nonprofit charity of our partner’s choosing that they feel will make a positive impact in the lives of others.