The Creative Spark Preview| 00:02 |
interested in, no one's ever going to pay
you to do them.
| | 00:05 |
Building games is sort of the ultimate
test of any technology.
| | 00:10 |
I always had this dream to build a game
development company, where a very small
| | 00:13 |
team of people could build a really cool
game, and have a lot of ownership over
| | 00:16 |
each of the components.
(MUSIC) Sean: We can go crazy, we can
| | 00:20 |
have, like, five minute idle animations,
and that would be just totally impossible
| | 00:24 |
if we were doing like traditional
keyframed animation.
| | 00:28 |
Mike: Because there's no cost to me
having extra animations, I can give more
| | 00:30 |
character to my characters.
Male: We build little tools that help us
| | 00:35 |
with very specific purpose issues, and we
build these big tools, things like
| | 00:38 |
Toolkit, so we can release that open
source, so that other people wouldn't
| | 00:41 |
have to solve those same issues again.
People'll ask, you know, why do this in HTML5?
| | 00:47 |
We could build this in a flash.
And honestly we could probably do it
| | 00:51 |
faster, but you'd have to always be
pushing that boundary.
| | 00:54 |
You'd have to play at the edge of a
technology, to create the demand for more
| | 00:58 |
experiences being built the same way.
It's just changing so fast.
| | 01:03 |
A year from now I don't really know what
I'm going to be doing, and I love that.
| | 01:07 |
(BLANK_AUDIO)
| | 01:07 |
| | 59:59 |
(MUSIC).
If you don't explore things that you're
| | Collapse this transcript |
| Grant Skinner, Interactive Developer| 00:02 |
My career has been defined by playing
around with stuff.
| | 00:06 |
If you don't explore things that you're
interested in, no one's ever going to pay
| | 00:10 |
you to do them.
Right now, I'm messing around with a
| | 00:13 |
quadcopter and, and are doing those.
I don't know if that's going to be
| | 00:17 |
something that our company focuses on, or
what.
| | 00:20 |
But I think it's exciting to play with it
and see where it goes.
| | 00:22 |
(SOUND).
G Skinner, basically focuses on building,
| | 00:30 |
like really cutting edge interactive
experiences.
| | 00:40 |
Applications, games, those those types of
things.
| | 00:44 |
We're based in Edmonton, which isn't
really the first place you think of as
| | 00:47 |
like, a big technology hub.
But we work with the newest APIs, we work
| | 00:51 |
with a lot of big tech companies.
You know, we build up demos to show where
| | 00:54 |
technology is going.
Partially, by building free things,
| | 00:58 |
building open source tools.
This isn't necessarily the best way to
| | 01:03 |
get rich.
But massive profit is not my goal.
| | 01:08 |
I would rather make less, and work on
more interesting projects.
| | 01:14 |
It's all about finding that new challenge
and keeping yourself interested.
| | 01:18 |
There's always a new problem around the
corner, there's always some new challenge
| | 01:21 |
to, to solve.
And that's why I get up in the morning.
| | 01:29 |
(SOUND).
I've been coding since I was like three
| | 01:30 |
or four years old.
My mom went back for her education
| | 01:34 |
degree, and she used to take me into the,
the university and plunk me in front of a terminal.
| | 01:39 |
And I would type in code from an old
basic magazine, so that I could play the game.
| | 01:45 |
In high school, actually sort of styled
myself a bit of a hacker.
| | 01:48 |
Although, you know, coming out of high
school, I started to realize I was much
| | 01:51 |
better at building pretty websites about
hacking.
| | 01:54 |
Than I ever was about actually hacking
anything.
| | 01:58 |
But I always had this dream to like build
a game development company.
| | 02:01 |
Where like a very small team of people
could build a really cool game and have a
| | 02:05 |
lot of ownership over each of the
components.
| | 02:09 |
So coming out of high school and getting
into comps, I, I started to look at how
| | 02:12 |
games were being built.
I was also playing a lot with the
| | 02:16 |
Internet, and I was building sites.
And I was starting to play with Flash,
| | 02:20 |
and I realized that, you know, it was
this new frontier.
| | 02:23 |
Where an individual or a few people could
build really cool content, stuff that
| | 02:26 |
people hadn't seen before.
And I got really drawn into that.
| | 02:31 |
And like trying to show the things I
could build on that medium.
| | 02:38 |
Traditionally, Flash was focused on
interactive and visual.
| | 02:43 |
You know, the really rich experiences
were all done in Flash.
| | 02:46 |
But I got really interested in the idea
of being able to build applications on
| | 02:49 |
top of it.
And so, you know, I started building
| | 02:52 |
things like FlashOS, which was the set of
UI components before there was components
| | 02:56 |
in flash.
Some menu bars and windows, and I kept
| | 03:00 |
sort of trying to extend that idea, and
add more richness and add more capability.
| | 03:05 |
and try and stay ahead of Adobe as they
(LAUGH) sort of built their own
| | 03:08 |
components and built their own
frameworks.
| | 03:12 |
and sort of ultimately culminating with
us starting to work with Adobe to build
| | 03:15 |
Adobe's frameworks and Adobe's
components.
| | 03:18 |
Sort of a dark period for me was just a
couple of years ago, the company was
| | 03:25 |
doing awesome.
And the technology was doing awesome.
| | 03:31 |
And we were doing amazing work and it was
really consistently great.
| | 03:34 |
And that's actually what the problem was.
Was that I felt like I wasn't solving
| | 03:40 |
problems anymore.
I was kind of bored of the technology
| | 03:42 |
that I was playing with.
I was kind of bored of my own company,
| | 03:45 |
because it was just doing too well on its
own.
| | 03:47 |
I didn't really feel like I was really
needed there.
| | 03:50 |
(SOUND).
So later, we were approached by Microsoft
| | 03:53 |
to start working with HTML5.
They asked us you know, can you guys
| | 03:56 |
apply all of this great stuff that you've
been doing with flash in HTML5 world.
| | 04:01 |
Specifically they wanted to see you know,
is it possible to build like a real game
| | 04:05 |
on top of HTML5.
because you know, building games is sort
| | 04:08 |
of the ultimate test of any technology.
We started out first project, Pirates of
| | 04:14 |
Daisies and I realized using HML5 had a
ton of problems.
| | 04:17 |
A ton of challenges, and there's so much
I could be doing and playing with, to
| | 04:21 |
make it better.
Our first run at it, we dealt a very
| | 04:25 |
purpose built block of code, to build
Pirates.
| | 04:29 |
But later on Microsoft extended our
project and let us add some more features
| | 04:34 |
and take a little bit more time with it.
And I thought it was a perfect
| | 04:40 |
opportunity to go back and like evaluate
the problems that we had run into.
| | 04:43 |
Find better ways of solving them in a
more abstract sort of general purpose manner.
| | 04:47 |
And actually build an open source
library, which wound up being EaselJS.
| | 04:52 |
So we could release that open source so
that other people wouldn't have to solve
| | 04:55 |
those same issues again.
(SOUND).
| | 04:57 |
Other people can build content faster and
better, and so could we.
| | 05:01 |
I don't think it's enough to just move
forward and try and find the path yourself.
| | 05:07 |
You have to actually drag people with
you.
| | 05:09 |
And you know for me, that was a lesson
that I had to learn.
| | 05:12 |
You know, like, sharing an open source,
and, teaching other people the things
| | 05:16 |
that you learn.
I realized a couple of years ago, that,
| | 05:19 |
you know there's a very finite limit to
how much I can create, personally.
| | 05:23 |
Where as, if I create things that
facilitate other peoples creation then it
| | 05:28 |
basically blows up exponentially, right?
So, building something like CreateJS,
| | 05:33 |
which makes it easier for other people to
create really amazing content.
| | 05:37 |
Means that I've indirectly facilitated
the creation of that content, and I
| | 05:40 |
really like that idea.
So once EaseUS was done, we wanted to do
| | 05:45 |
animation more easily.
And so we built TweenJS which is simple
| | 05:50 |
tweening library.
Then we wanted to do sound better, and so
| | 05:53 |
we built SoundJS.
And with that done, we realized we need
| | 05:57 |
to get these sound files and these images
and stuff like that loaded.
| | 06:02 |
And so we built PreloadJS, which let us
manage our assets and manage preloading.
| | 06:05 |
But with all these pieces assembled, we
realized we were really only working on
| | 06:10 |
half the story, right?
We were really only facilitating our
| | 06:14 |
developers getting involved and to build
the awesome experiences that we wanted to
| | 06:18 |
be able to build.
We also needed to get our designers
| | 06:21 |
involved and so to do that, we needed
tools.
| | 06:24 |
And so actually on a holiday in, in
Hawaii, I irritated my wife by sitting
| | 06:28 |
around and writing code.
And I felt the first version of something
| | 06:33 |
called Toolkit for CreateJS.
I took it into Adobe and showed it to
| | 06:36 |
them and they said wow, this is, this is
awesome, how can we work with you on that?
| | 06:40 |
And so now, it's an official Adobe
product and we're continuing to help them
| | 06:43 |
move it forward.
So, I think that developers are
| | 06:51 |
craftsmen, and craftsmen basically
combine artistry with technical knowledge.
| | 06:56 |
And my grandfather was a craftsman.
He was a carpenter and when he died we
| | 07:01 |
went and we checked out his workshop and
you know to clean it all up.
| | 07:07 |
And one of the things that really amazed
me about his workshop was how many custom
| | 07:10 |
tools he had built, right?
He, he wasn't satisfied with the tools he
| | 07:13 |
could buy off the shelf, he built all
kinds of little widgets and, you know,
| | 07:17 |
frame works and stuff like that.
That he could use to make his job easier,
| | 07:22 |
be more effective as a, as a craftsman.
And, that's something I've really kind of
| | 07:27 |
applied to what we do right.
We build lots of tools we, you know we
| | 07:30 |
build little tools that help us with very
specific purpose issues.
| | 07:35 |
And we build these big tools, things like
Tool Kit that solve much larger problems.
| | 07:42 |
(SOUND).
If you're going to push the limits, you
| | 07:43 |
can't be held back by the first problem.
You have to push your way through it.
| | 07:46 |
You have to build something that gets you
around that problem.
| | 07:48 |
And once you solve that problem there's
probably going to be a second problem,
| | 07:52 |
and I love that.
I love the fact that you know a year from
| | 07:55 |
now I don't really know what I'm going to
be doing.
| | 07:57 |
Will I be working with HTML 5?
Probably, but who knows right?
| | 08:01 |
I mean it's just changing so fast and
it's a lot of fun to try and keep up with it.
| | 08:11 |
(SOUND).
| | 08:12 |
| | 59:59 |
(MUSIC).
| | Collapse this transcript |
|
|
Extended FeaturesStudio tour| 00:05 |
Welcome to gskinner.
This is our office in downtown Edmonton.
| | 00:10 |
it's actually our fourth or fifth office,
depending on how you count it.
| | 00:13 |
The first office was, in my condo, just
four guys kind of piled around one desk.
| | 00:20 |
then we moved into a dedicated condo.
We moved into some temporary office space.
| | 00:25 |
our last office was custom-built, but
really utilitarian, and this is our first
| | 00:29 |
office that I think we've really gotten
to sort of express ourselves a little
| | 00:33 |
bit, spread out and have kind of a cool
space.
| | 00:40 |
(MUSIC).
So this is our little foyer we have our
| | 00:42 |
own fireplace, which is essential in
freezing-cold Edmonton.
| | 00:47 |
we also have a completely unused
reception desk, because we don't have any
| | 00:51 |
local clients, so no one ever comes to
visit us.
| | 00:55 |
this is our little living room, and so we
hang out here and have a little pow wows,
| | 00:59 |
chat about what's going on.
I love this antique radio that we found.
| | 01:05 |
We picked it up at a local antique mart.
Right now it doesn't work.
| | 01:08 |
But we're really hoping to like play
around with it, either get it working as
| | 01:11 |
it would of when it was new, or sort of
tweak it with some modern tech and make
| | 01:14 |
it fun.
This is our main production area, we have
| | 01:28 |
15 people that's a pretty heavy mix of
developers, we have designers,
| | 01:31 |
illustrators, and project managers.
we like to throw everyone into one big
| | 01:37 |
production area, and this way we get a
lot of mix between different talent
| | 01:41 |
types, different, levels of experience.
People can really learn from each other
| | 01:46 |
and walk around and talk to each other.
(MUSIC) One of the things that we started
| | 01:49 |
doing a couple years ago, was we started
to create these movie posters that really
| | 01:54 |
showcase some of the projects that we've
been proud to build.
| | 01:59 |
Naming off the people that have been
involved, you know, things like CreateJS,
| | 02:03 |
Pirates of Daisies, Atari Arcade.
And this kind of lets us like look up and
| | 02:08 |
see the stuff that we've built, and you
know, are really happy to have created as
| | 02:12 |
we're working on whatever's new.
(MUSIC) One of the newer things that
| | 02:20 |
we're working on here is we've recently
spun off a new group, called Tree Fortress.
| | 02:24 |
And, it's really focused on creating
commercial games that we'll release on
| | 02:27 |
our own.
In the past, almost all of our work has
| | 02:29 |
been service work, you know, we're
building things for other people.
| | 02:33 |
We really want to start building things
for ourselves.
| | 02:35 |
And, So, Shawn here is really
spearheading that along with Mike.
| | 02:39 |
And Mike's actually working right now on
some of the animation for Barbarian, and
| | 02:43 |
I'll let him tell you a little bit about
it.
| | 02:47 |
Mike: I'm currently working on the Ogre
who's one of our mini bosses after round
| | 02:50 |
five, and we're trying to figure out how
his attack patterns are going to play out
| | 02:54 |
and how he will effect the environment as
he's attacking you.
| | 03:00 |
So, I mocked up quickly how his attack
will look when he strikes the ground.
| | 03:04 |
Then I'm working in spreader to put it
all together and make it look like he's
| | 03:08 |
actually attacking.
I exported into (INAUDIBLE) of all the
| | 03:11 |
assets and Matt made them in spreader and
Sean built an exporter, so they animate
| | 03:15 |
independently through code there.
Male: One of the things we really do a
| | 03:19 |
lot is build out our own tools, to
facilitate a workflow.
| | 03:22 |
So, Spreader is this great existing
application and Sean actually built an
| | 03:26 |
extension to it, so it'll output the type
of content that we need to work in the
| | 03:29 |
environment we're building inside of.
(MUSIC) This is our Board Room here.
| | 03:41 |
you can see at the moment there's a code
review going on.
| | 03:46 |
So we have Blair, he's one of our newest
hires.
| | 03:49 |
Lanny, he's one of our most senior devs
along with West, also really a senior dev.
| | 03:53 |
Basically what's happening is Larry is
showing off some of the codes from the
| | 03:55 |
project he just finished off.
And these two guys are checking it out,
| | 03:59 |
giving some feedback and you know it's
something we try and do on a fairly
| | 04:02 |
regular basis.
We try and get different levels of
| | 04:05 |
developers together in one room and have
them really checking out each other's work.
| | 04:10 |
Another thing that our conference room
gets used for a lot is just hanging out.
| | 04:14 |
I mean, people get together, especially
at lunch, watch shows, watch you know,
| | 04:17 |
horrible old Kung Fu movies.
it gets really loud in here, but people
| | 04:22 |
have a lot of fun.
Other room that we use for that is our
| | 04:27 |
games room.
right now it's a little bit sparse.
| | 04:30 |
We have the Atari arcade system and
foosball, which is kind of the national
| | 04:43 |
sport of gskinner.
(MUSIC) This is my office you can tell
| | 04:54 |
because there's a picture of me, very
egocentric (LAUGH).
| | 05:00 |
This is where I do most of my coding.
and this is sort of my like mad scientist
| | 05:06 |
bench where I play around with
electronics and you know assemble
| | 05:10 |
different more physical things.
you know right now I am working on an
| | 05:15 |
idea with, this a r drone where I'm
basically wiring it up with our (UNKNOWN)
| | 05:19 |
tacking a bunch of electronics on to it,
and basically trying to turn it into an
| | 05:24 |
art piece.
The end result is going to be basically a
| | 05:30 |
light tracing canvas, so this quad copter
will take off, it will have a big,
| | 05:33 |
glowing light on the back, some sensors
on the front.
| | 05:38 |
And basically a camera pointing at it,
that uses computer vision to let me
| | 05:42 |
control this, this copter, and basically
we'll use long exposure.
| | 05:47 |
Let people actually, artists actually
illustrate drawings out and this thing
| | 05:51 |
will re-draw them using light in a dark
room and we'll, you know, super expose
| | 05:54 |
that on a camera.
you know, so far we have the, the copter
| | 05:59 |
taking off and landing which is very
exciting, we have some electronics
| | 06:03 |
working here.
So, this little globe will go on the
| | 06:07 |
back, and we can control it different
colors, different intensities.
| | 06:12 |
We can have thicker strokes, or thinner
strokes of different colors.
| | 06:17 |
These are the sensors that are going to
be mounted on the front of the quad
| | 06:20 |
copter, and this will give me the
distance to a wall.
| | 06:23 |
And I'll use that wall as a 2D reference
point, and so I'll be able to tell
| | 06:26 |
whether or not the copter is lined up
straight on it, how far away it is.
| | 06:31 |
And then I'll be able to use the light,
and again, the computer vision to
| | 06:34 |
actually tell me where it is in a 2D
plane.
| | 06:38 |
One of the awesome things about having a
company like I have is that, you know, my
| | 06:41 |
team builds awesome product, they do a
lot of the client work.
| | 06:45 |
And I get to sort of play around, and
build new stuff, and look to see where we
| | 06:47 |
should be going.
(MUSIC) And so I get to focus on sort of
| | 06:51 |
R and D.
And so this doesn't have any directly
| | 06:53 |
applicable client requirement right now.
It's just something that I think's
| | 06:59 |
kind of neat to work with, something I'd
like to learn.
| | 07:03 |
And something I think that if we get
really good at it, we can continue to do
| | 07:07 |
it for commercial projects.
| | 07:10 |
| | 59:59 |
(MUSIC).
| | Collapse this transcript |
| In depth: Atari Arcade| 00:03 |
We have like basically a 7-hour work day.
We do that because I think people work
| | 00:08 |
better when they have like a home life,
and Atari arcade was definitely the
| | 00:11 |
exception to that.
We all pulled incredible hours on it.
| | 00:16 |
I think Mike is like the guy that poked
the most hours because he was our one guy
| | 00:19 |
doing art for the whole project.
We basically got approached by both Atari
| | 00:25 |
and Microsoft.
And they said, hey, we want to, we want
| | 00:28 |
to rebuild some of these like classic
arcade games.
| | 00:31 |
And, you know, I grew up on those games,
so to me, it was like a super-exciting
| | 00:34 |
opportunity to like play with those
properties again.
| | 00:38 |
And, you know, getting to do it in an
official capacity.
| | 00:41 |
I've actually like re-created a lot of
these games in the past and but it
| | 00:44 |
probably wasn't legal.
(LAUGH) And so we kind of looked at what
| | 00:49 |
they asked us to do.
And, we decided that maybe the best way
| | 00:53 |
to show off HTML 5 wasn't necessarily to
like, rebuild games that were 30 years
| | 00:58 |
old and make them the same.
What we'd actually rather do is we'd
| | 01:03 |
rather bring these games forward, so we
want to like preserve the soul of the game.
| | 01:07 |
But sort of, you know, rebuild the flash
drive like make the, the graphics more modern.
| | 01:12 |
Have more modern music, you know, take
advantage of the stuff that's available
| | 01:15 |
to us nowadays, like multi-player and
social aspects and stuff like that.
| | 01:20 |
And and the client approved of it.
So, this project brought together a lot
| | 01:24 |
of different things.
It was, you know, a touch first experience.
| | 01:27 |
It was really designed to be used on a
tablet or a desktop device.
| | 01:32 |
Feels very, like tangible, very tactile.
you can drag things around.
| | 01:38 |
all of the games are playable using
multi-touch, you know, either with
| | 01:41 |
onscreen joysticks or with direct touch
interface.
| | 01:46 |
And I think it's really the first time
that something of this scale has been
| | 01:49 |
launched on top of HTML 5.
So basically, the client's trusting us
| | 01:54 |
enough, that we have to kind of run with
it.
| | 01:56 |
And we have to you know put our, our own
personality into the project.
| | 02:01 |
Instead of just being told, you know,
build this and having it go off a brief
| | 02:04 |
and you know, work with spec.
You know, we've got to sort of define
| | 02:08 |
that back.
The first thing that we started playing
| | 02:10 |
with is, you know, we're building an
arcade.
| | 02:13 |
So, images like Flynn's arcade come to
mind, right?
| | 02:17 |
I mean, a huge strong nerd growing up.
And so we had a lot of like neon and we
| | 02:21 |
had 3D arcade cabinets, and we started
showing this to the client.
| | 02:26 |
And they were like yeah, this is great.
Keep going with it.
| | 02:30 |
So, we actually took this pretty far.
We had, like a whole working 3D arcade
| | 02:34 |
with cabinets that like slid forward and
backwards.
| | 02:38 |
And you could play on, and then one of
the higher-ups at Atari took a look at it
| | 02:42 |
and said, we don't do retro.
Atari doesn't do retro.
| | 02:48 |
At this time, we were a month and a half
into a project that was already
| | 02:51 |
ridiculously tight.
Like, we only had about three months to
| | 02:55 |
build this project end-to-end.
And that included, you know, eight games,
| | 02:58 |
all the art, all the audio, the whole
site that went around it.
| | 03:02 |
Coming up with the concepts of what these
games were going to be and how they play.
| | 03:06 |
Figure out how to make really great touch
controls, as well as make them desktop playable.
| | 03:10 |
So, it was pretty darn stressful to like,
all of a sudden, get hit with having to
| | 03:14 |
rewrite the whole con, core concept for
the site.
| | 03:18 |
So, we started playing around with other
ideas, and we came up with this idea
| | 03:21 |
called the Tsunami.
And we started out with some really
| | 03:25 |
simple tests and we realized that, that
Internet Explorer 9 didn't have support
| | 03:30 |
for the full CSS 3D spec that we needed.
And so, we wound up having to write a
| | 03:36 |
custom, very simple 3D engine that would
actually.
| | 03:40 |
Let us work cross-platform so that every
browser would show this content.
| | 03:44 |
And we showed the clients and they really
liked it.
| | 03:47 |
And so, we've started moving forward.
But what we really didn't really tell
| | 03:52 |
them is that the sort of core inspiration
for this was actually Atari cartridges,
| | 03:56 |
which is still pretty retro.
We really wanted to be true to these
| | 04:02 |
games, right?
We wanted to like, give them a new skin.
| | 04:05 |
But we wanted them to have a, a really
strong connection to the originals.
| | 04:10 |
And so, for every single game, we tried
to figure out, you know?
| | 04:13 |
What's the iconic piece of this game?
What is instantly recognizable?
| | 04:18 |
So, you know, games like Lunar Lander,
for example.
| | 04:22 |
You have the, the moonscape.
And you have these ships flying around.
| | 04:27 |
For games like Missile Command, it's all
about the lines.
| | 04:30 |
The trail behind missiles and the
circular explosion, so we didn't want to
| | 04:34 |
like bring in new art that got rid of
that really iconic aspect of the game.
| | 04:39 |
With Centipede, for example, we were
basically dealing with this tension
| | 04:42 |
between what we wanted the character to
be and what the client wanted the
| | 04:45 |
character to be.
Yeah, the original game really doesn't
| | 04:48 |
give you a lot to work off of like, what
do these characters look like?
| | 04:51 |
They're just a bunch of pixels on a
screen, and the client was really looking
| | 04:55 |
at it from the perspective of these like,
comic books.
| | 04:58 |
This was actually the manual that came
with the game, and the centipedes is
| | 05:01 |
like, sort of friendly guy that gets
bewitched and comes and attacks you.
| | 05:06 |
For me, Centipede was more around what I
knew from the arcade cabinet.
| | 05:10 |
You know, this awesome psychedelic trippy
mushroom kind of an experience.
| | 05:15 |
And the centipede was really evil and
scary.
| | 05:17 |
And a lot of the ads around that time
were also this kind of like bad ass image
| | 05:20 |
behind it, right?
I mean, chicks dug it, it was, obviously.
| | 05:26 |
and so it really took us a while to find
sort of a middle ground between that
| | 05:29 |
cutesy appearance to it and something
that was a little bit more bad ass, right?
| | 05:35 |
So, Mike started out with some pixel art,
and at the end of the day we decided that
| | 05:38 |
we wanted to do something that was a
little more vector.
| | 05:41 |
Mike: It was actually a really sort of
tough process.
| | 05:44 |
we were still in the retro phase, and I
thought I was really into pixel art at
| | 05:47 |
the time and I was just getting into it.
So, I figured I'd moder, modernize it but
| | 05:51 |
not to a point where it's, it's vector
yet.
| | 05:53 |
It'd be sort of SNES error and started
off just throwing pixels around until I
| | 05:57 |
had something that was kind of cute but
still sort of, felt like the original game.
| | 06:02 |
I tend to sketch in the middle ground
where it's kind of rough, enough that I
| | 06:05 |
could make it pixel art if I need to be
or go vector with it.
| | 06:08 |
And from there I ended up liking the guy
on the right, and did the pixel art
| | 06:11 |
version of him.
Male: And one of the compromises that we
| | 06:15 |
came up with, with the client was.
We made our characters a little bit more
| | 06:20 |
evil but still pretty cartoony, but we'd
start the game in this sort of friendly,
| | 06:24 |
happy green field.
And then as the game progresses, and you
| | 06:28 |
go through different levels, you move
into this darker, scarier environment.
| | 06:33 |
With, you know, these guys lurking in the
background and this like psychedelic glow
| | 06:37 |
on the mushrooms.
So, we've go to sort of capture some of
| | 06:40 |
how we looked at the game and how the
client looked at the game.
| | 06:45 |
People ask, you know, why isn't it in
HTML 5?
| | 06:48 |
We could build this in Flash, we could
build this in other technology.
| | 06:52 |
And honestly, we could probably do it
faster and the games might even run better.
| | 06:56 |
But you have to always be pushing
boundary, right?
| | 06:59 |
You have to play at the edge of a
technology.
| | 07:01 |
To push it forward, to create the demand
for more experiences being built in the
| | 07:05 |
same way.
And so this let us like, feel out that
| | 07:08 |
space and, you know, create the
techniques, and show to other developers
| | 07:12 |
that this was possible.
And it opens up the door for other people
| | 07:17 |
to create these experiences.
| | 07:19 |
| | 59:59 |
(MUSIC).
I don't believe in overworking people.
| | Collapse this transcript |
| In depth: Bardbarian| 00:02 |
So, Sean and I started making a game on
the side for fun.
| | 00:05 |
We were both very passionate about making
games and we got a little bit in, and
| | 00:09 |
Grant seemed like he would be interested
in working with us.
| | 00:13 |
So Sean pitched him, forming a company
together, and we ended up calling it Tree Fortress.
| | 00:18 |
And our first game will be Bardbarian
through that title.
| | 00:21 |
Sean: It's built for mobile.
It's our first real attempts at creating
| | 00:24 |
our own product.
Lately I think we've just been getting
| | 00:28 |
the itch to, to sort of do our own thing
and, and break out of the restraints of
| | 00:31 |
client work.
be able to fully put our own character
| | 00:35 |
and humor into things and not, not be
held back or, or have the client change things.
| | 00:39 |
And so, I sort of, came to Grant with
this idea of, of letting us try this approach.
| | 00:45 |
Mike: One of the crucial parts of this
was building a character that people like.
| | 00:50 |
And something they can relate to.
I came up with Brad, who's a character
| | 00:53 |
that would rather play music than fight
people anymore.
| | 00:56 |
Sean: And he's forced into this battle,
where his town's under attack.
| | 01:01 |
Rather than picking up his axe, he grabs
his guitar and he runs out into the field.
| | 01:05 |
And he'll do some power solos, and summon
some of his buddies to come help him fight.
| | 01:10 |
Mike: And they will head out of the town
and fight for you, so you don't have to.
| | 01:14 |
Sean: So you have speed attack and
defense boosts.
| | 01:19 |
And then the idea is that as the waves go
on you'll get new, new bosses, you know
| | 01:22 |
fire golems, and trolls, dragons.
It started off as something simple that
| | 01:27 |
we could do in a couple months, and we're
now on our fifth month of developing it.
| | 01:33 |
We're just coming up with new ideas and
new things we want to prototype, and more
| | 01:37 |
characters and more bosses, so it's just
growing and growing in complexity.
| | 01:44 |
Mike: When reading up on character design
I read that the flaws and the things that
| | 01:46 |
are wrong with the character is actually
what people like most.
| | 01:50 |
With Brad, I found that the first time I
designed him, he felt flat, he didn't
| | 01:53 |
feel relatable, and he didn't have too
much character about him.
| | 01:57 |
So I redid him, Brad was born into a
family of barbarians and he's expected to
| | 02:01 |
be this big massive fighter.
And he could win, like he could end this
| | 02:05 |
war instantly if he wanted to but he
chooses to play music rather than fight anymore.
| | 02:12 |
So, with everything, all my characters
will start as a sketch.
| | 02:15 |
So, here's one I'm working on right now
for a necromancer type character.
| | 02:18 |
they just start off as doodles they're
really rough, I, I don't Have any
| | 02:21 |
intentions on bringing the (INAUDIBLE) to
the finish line.
| | 02:23 |
I just try to get my ideas across first
and try to sell Sean on them, and if
| | 02:26 |
they're good, I'll run with them.
And then in Photoshop, I, I build my
| | 02:30 |
character modular, just each piece
individually.
| | 02:36 |
After I've exported the assets from
Photoshop, Spriter's able to pick them up
| | 02:39 |
from the folder.
In which case I bring all these assets
| | 02:42 |
in, piece by piece, and, and rebuild my
character.
| | 02:46 |
Sean: The Spriter was on Kickstarter
about six months ago and that's how it
| | 02:49 |
got our attention so we became early
backers on it.
| | 02:53 |
And now we're actually pretty active,
pushing them, cause we're already trying
| | 02:56 |
to use it as a product before it's out.
So, we're in their forums pushing them to
| | 02:59 |
fix bugs and that sort of thing.
And so the next thing about Spriter, not
| | 03:03 |
only does it save on texture size you
know, we can create retina level graphics
| | 03:06 |
without having a huge number of
spreadsheets.
| | 03:10 |
But it also lets us create virtually an
unlimited length of animation.
| | 03:14 |
And so we can go crazy, we can have like
five minute idle animations.
| | 03:17 |
That would just be totally impossible if
reading like traditional key-framed animation.
| | 03:23 |
Mike: And with the work flow of the
Spriter, it's so simple and so intuitive
| | 03:26 |
that it just kind of makes sense to use.
literally you're just clicking and
| | 03:30 |
dragging parts along a timeline, where
you need things to be and when.
| | 03:34 |
Sean: We still can use flash for a lot of
our animations.
| | 03:37 |
the thing about these, Spriter ones, that
they're a bit expensive.
| | 03:40 |
Because each piece of the body is
actually a sprite, rather than the
| | 03:43 |
character being one sprite, he's 8 or 9
or 12.
| | 03:47 |
so, for our smaller units, we still do
have some keyframe based animations that
| | 03:50 |
came from flash, and we're mixing those
with the more featured items that come
| | 03:54 |
from Spriter.
So, it gives us a good mix of, sort of,
| | 03:58 |
traditional that has it's benefits, and
then, Spriter, which has it's benefits,
| | 04:02 |
and we can mix and match.
So, essentially what happens is he does
| | 04:09 |
these animations here, this program kicks
sort of XML file.
| | 04:13 |
That basically has the X and Y and
rotation of every piece.
| | 04:17 |
And I wrote a little library for Sterling
that just reads that XML file and
| | 04:21 |
basically just tweaks things from
keyframe to keyframe.
| | 04:25 |
So, you can think of it like a puppet
where each piece is independent and
| | 04:28 |
moving independently but then it all
comes together as a smooth animation
| | 04:31 |
running at 60 frames a second too, which
is really cool.
| | 04:36 |
You can't do that with key framed
animations, because you'd run out of
| | 04:39 |
spreadsheet space in like 2 seconds of
animation.
| | 04:44 |
Whereas we can only have minutes and it
adds just kilobytes to our file size, so
| | 04:47 |
it's pretty cool.
Mike: So in a few minutes, I was easily,
| | 04:50 |
like, I mean, it's not a finished quality
product, but I was able to whip up a
| | 04:52 |
rough, run animation just from moving
parts around really quickly in the timeline.
| | 04:58 |
Sean: And what comes out the other end is
just a text file.
| | 05:02 |
And you can see it has a list of, of sort
of all the different pieces, and it's
| | 05:05 |
just key frames.
And so, the next step for us was just to
| | 05:08 |
write a little importer that takes a
script, matches up the pings to images at
| | 05:12 |
Sterling, and then starts moving
everything around at an API like play,
| | 05:15 |
stop, pause.
And then we added a bunch of other cool
| | 05:19 |
stuff on top of it, so we can swap pieces
out at any point in animation, so we can
| | 05:22 |
make a guy blink.
No matter what he's doing, he's always blinking.
| | 05:27 |
So we have our, our blinking code going.
we can do things like, like swap our hand
| | 05:30 |
states, and that's how we get the
strumming and the picking.
| | 05:35 |
As an example of the silly stuff we can
do, because we don't have a limitation,
| | 05:39 |
we have like 6 different death animations
that just randomly play and are each 2 to
| | 05:42 |
3 seconds long.
And that's free for us, where that would
| | 05:47 |
be like a whole massive spreadsheet of
assets and we probably not do it, because
| | 05:51 |
it just wouldn't make sense.
So, there's this animation which we were trying.
| | 05:56 |
So, we might actually have him live tweet
some stuff in the game.
| | 06:01 |
Mike: So, that's the thing about Spriter
and the fun thing about this is that,
| | 06:03 |
because there's no cost to me having
extra animation, I can give more
| | 06:05 |
character to my characters.
And that, when you gets an achievement,
| | 06:10 |
he stops, and he starts tweeting about
the boss he just killed, or something
| | 06:13 |
like that.
And I think these little touches are what
| | 06:16 |
make games fun.
Sean: Yeah, we're, we're definitely
| | 06:18 |
having a lot of fun with just sort of
putting our own humor everywhere in this game.
| | 06:22 |
And I think that's, that's part of what
makes indie games great, (LAUGH) and so
| | 06:25 |
we're embracing that fully.
So, when this is all wrapped we're
| | 06:29 |
going to deploy it to IOS first, and see
how it goes.
| | 06:34 |
a couple weeks later we'll probably bring
it to Android and then hopefully if, if
| | 06:38 |
it's successful and it start selling some
units we're going to spend a lot of time
| | 06:41 |
adding new content to it and supporting
it.
| | 06:44 |
we really believe in, in sort of
supporting your successes and building on
| | 06:47 |
your franchises.
So, best case scenario is this does
| | 06:50 |
really good, and we can just spend a
whole bunch more time on Barbarian adding
| | 06:53 |
new characters, adding new bosses, and
then bringing it to new platforms.
| | 06:58 |
So, Oolia is really exciting to us right
now.
| | 07:02 |
We just love the idea of playing things
with controllers our own games, it's like
| | 07:05 |
mind blowing.
and then Steam is probably next on the list.
| | 07:10 |
Then probably we're looking at sort of
the secondary markets, so Amazon
| | 07:14 |
Blackberry 10 maybe Nook that sort of
thing.
| | 07:18 |
so when it comes out we will be talking
all about it at TreeFortress.com.
| | 07:23 |
we have a Twitter handle @Tree_Fortress.
you can find us on Facebook, on Google+,
| | 07:28 |
so basically anywhere that you might be,
we should be there too.
| | 07:31 |
so yeah, we hope you check out our blog.
| | 07:35 |
| | Collapse this transcript |
|
|
