Beginnings

Prototyping

The first thing I needed for the project, was a base website, something I could put all my work into. So, I needed to decide the layout for the website. This is where prototyping comes into use. I started designing layouts for the website on paper, sketching out the boxes and where each part would go. The game needed to have a few core elements, such as a video player, a text box, and a submit button. Not to mention a title at the top. I needed the basic options, the option to start again, the option to go back to the previous choice, a list of commands the player could use, such as "Pick up" and "Walk North, South, East and West". The player would also need to easily be able to access their inventory, so I decided to put this on the text log, where the descriptions and such would appear, as well as a list of their past commands.

I noticed I had a little more room on the page that needed to be filled up, so I started thinking of more things to add. I realised this game would need a logo, a little something people could see and think of my game. I also considered adding hints for each page, it could be used to help the player move along, though I'm not sure how I could implement this with the multiple choice aspect, as the player had to make their own decision, and not feel inclined to choose something other than what they normally would because of hints in a certain direction.

After creating a quick paper draft, I started work on actually trying to get this website made, I started using dreamweaver to get the code down, using HTML as my main code and attempting to link it to another CSS file. For now I just wanted to get the page working with all the elements laid out, I needed a template, where all I'd need to do was add text and the video specific to the page. For now, to test that I'd need to use fill-in videos.

I quickly discovered the live view of the webpage in dreamweaver wouldn't allow me to view the video placed on the page, so in order to test that I'd need to open it up in a browser. I started testing the most basic things first, changing the colour of the background, adding a title and text etc. Eventually I got to the stage where I wanted to try adding a text box, so I looked up a few tutorials, and tried adding one in, along with a submit button. The result can be seen below:

Here I'd managed to get a header down for the title, a small section of text called "paragraph test" where I plan on putting the various descriptions of what's going on, and a text box, along with "Enter Command"as an instruction and a submit button. I typed "work" into the box to show you could type into it and made the background green to show...well, that I could make the background green.

The video had already been coded in but as you can see above, it wasn't showing in the live view, so I had to open it in a browser, and the result was:

Well...

The player was a little too big. I couldn't fit the whole thing on my screen. I'd added controls for the video player in the code, and used a video from the archives pitch I'd edited. So, I needed to make the video player smaller. And the current way I was adding it wasn't giving any size options. It took a quick google search to find out how to shrink it down again, though I had to re-type the code.

I rejigged the video player code and changed around the text. The plot was developing in the background to this so I'd changed the location, and added a new name as a placeholder. TBVG or Text Based Video Game. Created from sheer imagination.

Much better. Once I'd found a much more appropriate size, I decided I needed to get these things into the centre of the page. This wouldn't be the size of the final video, but I needed something to work with. I needed to move all the aspects into the centre of the page, then get on with adding the coding required to actually get the text box working.

I went and got a book. Yes, a real book. With real pages and words in ink, from the LRC in the college. It was titled "The Web Developers Cookbook". And talked through a lot of HTML5 guidelines in making various kinds of games. Chapter 2 focused on text-based games. Exactly what I needed.