03 5 / 2012
Technology 3: Framework
The new demo shows the current game framework in action, though not without its quirks! Once all the components are created, it will just be a matter of adding the all of the scenes, characters and dialogue. The code is also available on GitHub, and I am keeping a list of issues including ongoing bugs and future features.
Some of the major components of the game so far are as follows:
Walk To: Control of the character’s movement. In point-and-click games, traditionally the player’s movement is controlled by selecting the appropriate action (eg Walk To) and then clicking to where they want to go.
- This Crafty MoveTo component was used as a reference.
- I am using a Viewport which is integrated into the ‘Walk To’ component so that the background scrolls smoothly.
- The component also decides whether to flip the player horizontally depending on which direction they are heading.
- The Player’s movement is restricted to a MaxX and a MaxY value for every scene. This will influence the way the artwork for the backgrounds is created.
- I still need to add a walking sprite so that the character doesn’t appear to float over the scene!
Doors: Doors have now become a component so that each door can be initialised in the appropriate scene with a width, height, x, y and a pointer to the next scene.
Dialogue: This component reads a JSON file, which is organised into objects representing scenes and characters (including the player which will be a constant in any conversation).
- From the JSON file it figures out where to start (a starting point can also be determined manually) and how to split the objects into dialogue and the ‘next’.
- Part of conversations in many point and click games are user choices. The dialogue component determines how to split the choices so that each becomes a clickable list item in the UI (using jQuery selectors to do this).
- I still need to remove the choices once they have been selected or ‘used’.
- I also want to use this file or perhaps a separate JSON file to store descriptions of the items in the game (for instance if a player ‘Looks at’ an item).
- Still need to refine the ‘exit’ of dialog choices mode, eg with the ESC key or once they have come to the end of a conversation.
Keyboard shortcuts: These are for all the main actions (Walk to, Talk to etc) which just gives users more input options, especially if they are unfamiliar or frustrated with this old-school style of game play.
The next step for the framework is the Item system and Inventory. Once these are done, the main skeleton of the game will be complete! Other major functional considerations include animations for cutscenes. I want to utilise HTML5, CSS3 and Javascript as much as possible for any of the cutscenes.
Next I will be taking a break from the technological side of things to work on some artwork so that I have assets to complete the first level. Back to the drawing board!
18 3 / 2012
Technology 2: Demo
I have posted a very basic demo to my website which can be found here. The main objectives of this demo were to:
- get familiar with the way Crafty works and
- make some progress towards a proof of concept
I feel I have done this even though it is very ‘smoke and mirrors’ at this stage. I used scanned rough sketches for the scene and objects to emphasise the fact that it’s a demo - I am concurrently working on some more detailed concept artwork, and even so I suspect the artwork will change and evolve a lot as the game progresses.
At the moment what you can do with the demo is: see that the main character animates (blinking), and pick up the item on the bar which then gets added to the inventory visually, displaying on the menu at the bottom. At the moment it also adds a reference to the item in an Inventory array. To see this you can type Inventory.inv into the console.
There are still a lot of things I want to do with the demo, but not too much before scoping out the functionality needed in detail. I really want to use HTML5 Canvas for this project as much as possible, but some elements are in the DOM because they worked better there, other things will have to stay in the DOM (such as text).
My to-do list for this demo is as follows:
- Have a better system for changing text on the menu bar (dynamic rather than static)
- Refactor item functionality into a component (class)
- Add some basic dialogue interactions
Other important things to note: naming will have to be smarter when many more items are involved and in general. Objects will also have to be named in such as way so as not to conflict with any existing Crafty objects. Also, when it comes to sprites I will have to make sure I am not duplicating whole images unnecessarily (eg the characters’ eyes could be the sprite rather than the whole thing) as this will have an impact on performance (loading times etc).
So that’s the demo. I will keep you posted as to when you can see some more functionality added. In the meantime, the next post will be about concept art, I hope to have a couple of characters and a scene drawn roughly to give you an idea of what it’s going to look like!
03 3 / 2012
Technology and Game Style
I know what you are thinking - it takes dozens of people many months of hard work to design and implement a game. I’m going to talk about a few of the ideas I have in mind for making this process easier for myself.
I have some experience with implementing games using Flash, however for this project I want to explore new technologies like HTML5’s canvas and also use this as an excuse to become more competent in Javascript. However, I am a designer first and a novice programmer at best so I will enlist the help of a Javascript game engine such as Crafty, which is open source. It uses a component based system, and for someone like me that’s very familiar with JQuery, this could be the go. There are lots of other useful resources for HTML5 game development as I am discovering such as this simple polygon tool which could be used for mapping out a scene.
As for the game style, I want to avoid characteristics that might involve a massive learning curve for me (such as anything physics-based), and am leaning towards a point-and-click adventure game like one of my favourite games of all time Day of the Tentacle, a style which is also alive and well today as evidenced by popularity of this kickstarter project. This style of game lends itself well to exploring and engaging in a story. The player will have a range of actions available (eg talk to, pick up, look at, walk to) to interact with scenes, other characters and items. Therefore one of the main functional requirements will be an inventory system. I am hoping to use Crafty to get a simple demo of an inventory system up in the next week or two.
Meanwhile, I am working on the content and the story, which with this simpler style of gameplay will be essential to convey the message of the game. Stay tuned, as story and content will be the subject of my next post!