BIG post today! I spent a solid chunk of last semester working on this interactive programming assignment. Weeks and weeks of drawing, animating, and coding, all working together to create a short and sweet little game called "The Getaway." Click HERE to play the game yourself!
Today, I am happy to announce that my Interactive Programming project for this semester is finished! The last of the programming is complete, and all the glitches have been dealt with. Charlie is now capable of walking left and right depending on which buttons the user presses, and he can jump when the user presses the up directional button. The character is now unable to walk outside of the movement zone and can no longer walk beyond the edges of the forest. He interacts with two objects - a bunch of cables, which causes a bird to appear, and a colour-changing mushroom - and he breathes and tilts his head when he’s idle.
The main issues I faced in the past two weeks have been to do with program failures, absurdly large files, and extreme lag. These were largely the result of importing illustrator files into Flash CC, which created thousands of movieclip layers. The best solution I found to this problem was sacrificing vector graphics, and replacing them with flattened PNGs.
This project has certainly been challenging, but nonetheless I had a lot of fun with it. I learned a lot from the process of completing it, and I’d like to create something similar with a new character in a new environment.
Click here to download the program and use the directional buttons on your keyboard to try it out for yourself.
If the link above doesn't work, try this: http://www.penandpixel.ie/#submissions[portfolio]/17/
The past two weeks of this project have been a blur of error correcting and playing catch-up. It’s been hectic and discouraging, but I do feel like I’m getting Charlie back on track!
I made one huge mistake in my approach to this project. I used Flash CC. I wanted to work from home so I could spend more time on it, but CC was the only version of Flash I had available. It feels like everything that might have gone wrong, has gone wrong; and almost all of the issues that arose could have been avoided if I’d been using Flash CS6 instead. I had parts missing from my character and layout, I had brushes that failed, and I had close to three thousand layers of movieclips when I tried to import designs from Illustrator into Flash. That’s naming just a few. CC was a nightmare to work with because it was unstable, unpredicatable, and painfully slow. I tried everything I could to try and get things working in CS6, but considering the not-too-distant deadline and the amount of work I’ve put into this so far, I realised that I would have to finish this project using CC. It adds a whole new level of challenge to the assignment, but I’m going to try my best to work with what I’ve got. And I will never use CC for any other projects. I’ve learned that lesson.
Despite all setbacks, I’ve managed to start working on secondary animation. When idle, Charlie will face forward, and he’ll be able to breathe (such as robots do) and tilt his head. He’ll be able to jump when looking straight, and while moving left and right. I’ve also drawn up a little bird in Illustrator, which I’ve rigged and roughly animated. The bird will fly across the screen when Charlie hits a certain object on the stage. I’ve yet to decide on whether that object will be a mushroom, a tree, or something else entirely, but I hope to add that element of interaction soon. I’m also planning to add a second interactive element, which is still in the planning stages.
In terms of coding, I’m using scene labels and the “.gotoAndPlay()” and “.gotoAndStop()” arguments to my advantage. Charlie now walks in the correct direction and at the right speed when the user presses the appropriate keyboard directional buttons. He also faces forward and jumps when the user presses the up button. When no buttons are pressed, Charlie faces forward, and moves as though idle. However, at the moment, each scene – that is, each movement – only plays once. That means Charlie only takes two steps before he stops moving in either direction, he only jumps once, and only moves when idle once. The next step is setting those to loop continuously. Once that works smoothly, I’ll begin work on the interactions between Charlie and the environment.
Click here to try to control Charlie yourself, but bear in mind there's a lot more work to go!
This semester in college is largely focused on one major project; developing a two-dimensional character and environment in Adobe Illustrator, and then using Adobe Flash and ActionScript to create a walk-cycle and enable a user to control the character. So far, I've finished all design aspects of the project, and I'm in the very early stages of programming the character and environment.
My character is called Charlie, from CH-4R-713, which is a short-hand version of his make and model. His story is that he is an outdated home-helper robot, which has fallen into disrepair. Over the years, he has lost some panels in his bodywork, which left vital wiring exposed. Charlie’s story involves a bird removing a vital cable from his arm, thereby forcing Charlie to leave his home in pursuit.
As with most digital work, the design for Charlie started out with pencil on paper. After research and development, I settled on the design as it is now, then drew it up in ink and scanned it. Ensuring each individual part was contained in its own layer - to make life easier when it came to rigging - I set to work recreating it in Illustrator.
The next asset to be created was the environment Charlie will inhabit. I wanted to keep it simple - so that the focus was on Charlie and his movement – so I settled on a woodland location with a lot of gentle, organic shapes, and I kept the colour scheme quite muted. The most important aspect to keep in mind when laying it out was that it had to support parallax scrolling, so each layer of scenery had to be contained in its own layer in Illustrator, and those in the near foreground needed to be wider than those in the distant background to allow them to move more quickly.
While working on that, I was also busy getting Charlie rigged and ready to start walking. The original Illustrator file was imported into Flash and every component that moved was converted to a symbol and rigged so that they rotated appropriately. Then I added keyframes to establish the most extreme points of the walk cycle, and tweens to start making the movement more fluid. Tweaking individual frames and tweens, and adding slight squash and stretch to certain parts, most notably the spring in Charlie’s torso, helped to give it a more ‘natural’ feel.
I’ve just scratched the surface in terms of coding the ActionScript. I have the background scrolling left and right according to the keyboard controls, but I have yet to set limits, bring Charlie into the scene, and get him walking in the right direction and at the right pace as well. I also hope to start working on an interaction between Charlie and something in the environment very soon.