Making your first video game with Twine – Part 2

Two weeks ago, you learned how to start building your own game with Twine. You started writing the adventure of a princess stuck in a tall tower with a dragon. You learned how to create story nodes and transitions in the story as well as adding images.

I have recently watched Anita Sarkeesian’s Damsel in Distress trope reversal video. Damsel in Distress trope is an idea used in a lot of classic video games, such as Mario Brothers, in which a woman is captured and has to be rescued by a straight male protagonist. At the end of the reversal video, Anita describes a story where a princess rescues herself and starts living a life of general badassery. This stroke a chord with me, since we are developing a very similar game idea. Go ahead and watch the video below and get inspired 🙂

Inspired to continue making your own video game? Good! Let’s continue where we stopped last time! So far we have a beginning of the story, that should look something like this when Test Played (use the menu Build -> Test Play):

Screenshot 2015-09-29 05.58.15

If you played video games like Sims, Dragon Age or Mass Effect, you know that those games let you name the characters you create. Let’s add the same functionality to our game!

Rename your “Start” node to “Princess”, like so:

Screenshot 2015-09-29 06.02.58

Create a new node using Screenshot 2015-09-29 06.05.01 icon, name it start and add the text that will allow you to name your princess.

What is the name of the princess? <<textinput $name [[Save|Princess]]>>

If you Test Play now you will see that the code above is rendered as a prompt with text area where you can enter new text and a Save button. The code above creates a textinput, saves whatever has been entered into a variable $name and transitions to the Princess node.

I like to think of a variable as a sticky note. Imagine you are talking to someone on the phone that you do not know. At the beginning of the conversation, you jot their name down on a sticky note so that by the end of the conversation, when you have already forgotten their name, you look back on your sticky note and say “Thank you for your help, <the name from the sticky note>”. Variables in Twine use the same idea. Now let’s Test Play your game. You will see the prompt, the text area and the save button. There is no mention of the $name variable anywhere because it is saved behind the scenes.

Screenshot 2015-09-29 06.13.12

Your Twine game board should look something like this now:

Screenshot 2015-09-29 06.11.20

Even though we are prompting for and saving the princess’s name, we are not using it anywhere in the text. Let’s change that. Go to your Princess node and add the code that will replace the name variable, by the name you entered, as shown in the graphic below.

Screenshot 2015-09-29 06.16.55

If you Test Play your game now, and enter a name for a princess, it will be inserted into the story.

Screenshot 2015-09-29 06.30.44

Screenshot 2015-09-29 06.31.18

Awesomeness! We have learned how to use variables to save and display the name of your princess character. In the next tutorials, I will show you how to use variables for tracking princess’s health as well as having interesting conversations with the dragon. Have a good week, and CodeBrave!

sailormoon

Advertisements
Making your first video game with Twine – Part 2

Hobbit Hole? Or a Social Creativity Palace? – A Day in the Life of a Software Developer

At the very early days of my career when I was taking my first intro to programming class, I remember asking a full-time developer what his day is like. He replied “I get to my hobbit hole at 8am and leave at 4:30pm”. This was not an inspirational exciting answer for someone who is just entering this career. I am going to remedy the situation for all the aspiring coders-to-be out there and tell you about my Monday.

goodmorning

The company I work with follows a practice called Scrum. Every week, or sprint, my team meets up and looks through potential features that will be implemented that week (stories). We break each story into smaller tasks and vote on how difficult the story will be to complete. This is called planning poker where each team member chooses a card describing complexity of the task (1, 2, 3, 5, 8, 13). Each of us hides the card they chose, and on count of three reveals it. It is quite a fun activity!

alice

Here is the schedule:

5am Coffee!!! and play with my cat Leliana

12045340_10206356994541384_2090950778573594239_o

6am Gym, listen to podcasts or read a book on business

belle

7am Get ready for work (I live next to downtown Boise, so it takes me less than 10 minutes to get to work)

8am More Coffee!!! (either at work, or in coffee shops meeting up with awesome people from tech industry in Boise), read through emails and stories to be discussed during sprint planning

9:30am – noon Sprint planning and planning poker

noon – 1pm Lunch with my team at Costa Vida Mexican restaurant (yummy!)

1pm Scrum meeting. This is a little confusing, since scrum means two things. First is the overall practice for breaking up and evaluating the tasks to be performed during the sprint. But it is also the name of a meeting. My team stands together in a circle for no more than 15 minutes and answers three questions:

  • What did I work on yesterday (last work day)?
  • What am I going to today?
  • What is blocking me from accomplishing my tasks?

mulanarrow

2pm – ~4pm Work on stories. Each story is prioritized, and you get to pick the next available on first come, first serve basis. My team practices pair programming in which you get to sit together with another developer, and code.

5pm Meet with more awesome people in the industry for tea and project discussions

6pm Get home and play with Leliana. Hang out with my husband, make dinner together or go out

7pm Play video games, watch shows together with the husband

dragonage

9pm Meditate

9:30pm Read more books

10:30pm – 5am Snooooooooze

Your schedule might be different (especially waking up at 5am – I know, I know it is very early!), but the point I am trying to prove here that developers lead a full life, work together with people on fun projects, and definitely are not buried in a hobbit hole for good 9 hours. You are a  Baggins, and are going on a CodeBrave adventure, not hiding in a hobbit hole!

baggins

Bilbo Alice Hobbit Belle DragonAge Mulan

Hobbit Hole? Or a Social Creativity Palace? – A Day in the Life of a Software Developer

Making your first video game with Twine – Part 1

One of the reasons why I started learning how to use a computer when my parents bought it in 2002 is I wanted to play video games (come on, I was only 12!). But more than that, I wanted to make one. Unfortunately, at the time my cousin told me that would be too difficult, and he was right – back then there were no tools available for a novice to make their own game. Instead of making a game, I spent hours perfecting my website-learning skills, learning HTML and CSS.

brave

Today, making video games is trivial, since there are a ton of tools available. One of the coolest and easiest tools to learn is Twine.

  1. Go ahead and download Twine on Twine website (available for Mac, Windows and Linux).
  2. When you open Twine application, you will see the following nodes on your screen:

Screenshot 2015-09-15 06.09.45

Start node is the starting point of your game. We will get to modifying it in the next step.

StoryTitle node is the name of your story.

StoryAuthor node is your name (or your pseudonym, whichever you may prefer!)

You can double click on any of the three nodes and change the text in them. Just make sure not to change the titles of Story, StoryTitle and StoryAuthor, or the program will not work!

3. Let’s start writing your story! Double click on Start and write the start of your story. Here is what I have so far:

Screenshot 2015-09-15 06.19.52

I have also changed the StoryTitle and the StoryAuthor nodes like so:

Screenshot 2015-09-15 06.28.56

Screenshot 2015-09-15 06.29.07

4. Cool! Now let us run your game and make sure that it works. Click Build->Test Play in the Twine menu.

Screenshot 2015-09-15 06.30.44

You will get redirected to your browser, and voilà, your game is running!

Screenshot 2015-09-15 06.35.24

5. Let’s save your story by doing File -> Save Story. Save it to a place that you would remember.

6. So far the game looks somewhat sad and boring without pictures, don’t you think? Let’s make it more alive with a picture. I got my picture from here, but you can use any picture you want. Make sure to save the picture in the same place where you saved your twine game in step 5.

Double click on the start of your story and type the following line:

[img[dragon.jpg]]

This is how Twine allows you to insert images into the game. The img tag surrounded by outer braces specifies that it is an image and text inside the inner braces specifies the name of an image. Your image may be called something else, not necessarily dragon.jpg. Make sure your names match.

Screenshot 2015-09-15 06.45.55

When you close the Start window, the following message will pop up:

Screenshot 2015-09-15 06.46.53

Click on Yes, and you will see an image node added to your storyboard. Test Play your story and make sure the image shows up.

Screenshot 2015-09-15 06.49.31

7. That is much better! One more step left in today’s tutorial: how do we continue the story. So far there is one static page with a paragraph and a picture, so that is hardly a game!

Right click on the Start node again and add the following text before the image tag:

[[But one day…|escape]]

This looks very much like an image tag, doesn’t it? Text surrounded by double braces creates a link to another node. The text “But one day…” is the text that will be displayed as a link, and “escape” is the name of the linked node. The two are separated by ‘|’ character which is needed to show where the link test stops and where the linked node starts.

Screenshot 2015-09-15 07.02.53

Close the Start window and you will be prompted about creating a passage escape. Click on Yes, and you will see that another node has been added to your Twine board.

Screenshot 2015-09-15 07.09.25

Play Test, and you will see that there is a clickable link just above the image that leads you to a new node (which will be empty, since we have not yet added text to it).

Great work! You have started creating your first Twine game! The game does not do much yet, but this is a good start. In the next tutorials, I will show you how to let a player name the princess (or the dragon), how to track the health of the main character, and how to have a meaningful conversation with a dragon (with different conversation choices). Tune in next Tuesday and be Code Brave!

Brave

Making your first video game with Twine – Part 1

CodeBrave Funds

In addition to being an awesome field, computer science has a lot of funding for women, both pre- and post-graduation. That means we do not have to go hungry while in school or during the job hunting stage.

My favorite scholarship by far is Google’s Anita Borg Memorial Scholarship. With this scholarship you not only receive $10,000, but they also take you on a magic carpet ride to Google HQ in Mountain View, CA, where you will explore the awesome Google campus, ride the Google bus, get to try on the Google glass, sing karaoke and enjoy a two day hackathon of making something awesome with your fellow scholars.

aladdin

Society of Women Engineers has a ton of engineering scholarship donors for women. In order to be considered for dozens of SWE scholarships, you need to fill out only one application, so I will definitely recommend to check them out.

I would not discredit your computer science department as a source of funding. Most departments provide at least some sort of scholarship support and scholarships targeted to increase diversity in the CS field.

Now that we have the tuition covered, what about the conferences? Yes, there is funding for them as well. The biggest and the most inspirational conference for women in computing that I have ever been to is Grace Hopper Celebration of Women in Computing. As you may know, Grace Hopper is the woman inventor of the COBOL language (don’t worry if you don’t know what the word means yet – I will cover it in the future posts, but just remember that this invention of hers is big). Grace Hopper conference is awesome: you are surrounded by 9000+ like-minded smart women technologists, a bunch of big companies recruiting women, like Google, Facebook, or Microsoft, excellent leadership and programming talks, and, finally, a ton of parties!

party

As you study the field of computing, you may get interested in a specific topic, let it be big data, graphics or programming languages. There are plenty of conferences that provide student funding. As an example, consider the Super Computing conference. The conference recruits student volunteers to help with conference organization, and as a volunteer, you will get a chance to learn a lot of information about your field.

Now go ahead, get the funding, go to conferences, create something awesome and be Code Brave!

brave3

Aladdin Party Brave

CodeBrave Funds

Do you have to be a stereotypical geek to go into computer science?

This question has bothered me ever since I took my first intro to programming course. At the computer science department in the school I attended more than half of the students seemed to look and behave like this:

Yes, the superhero t-shirts, gaming laptops, and the vibe of general unkemptness. I was going through an interesting late-teenage stage in my life and decided it was time to change. So I went stereotypical geek.

I watched most of Star Trek the original series episodes, bought a bunch of t-shirts with catchy phrases like “I miss Vulcan” or “Emotions are alien to me, I am a scientist”. I completely stopped dressing up girly and bought a bunch of baggy pants, and started playing World of Warcraft Massively Multiplayer Online Role-Playing Game (MMORPG).

penny

(Okay, it was not that bad, I still washed my clothes and applied makeup, but the general bagginess of clothes is pretty accurate.)

I was a stereotypical geek for about half a year, before I realized I could not sustain this image for a long time. I missed my non-Star Trek shirts and wanted to go dancing. I was also tired of bragging about what level my character in World of Warcraft was. During my social experiment of stereotypical geek conversion, I actually did become more geeky. I picked up a game and a show here and there and started to cosplay a little.

When I graduated from school and started working full-time as a software developer, I had an epiphany. I realized that I was the stereotypically geekiest person on my team. The people in the field seemed to not care as much about what shows you watched or what games you played. Working programmers play games on the computer with their kids, go camping on weekends with their families, and attend gyms. They are normal people doing their jobs and living their awesome lives.

Yes, there may be companies out there that are filled with blokes out of Big Bang Theory, but there are also companies with non-stereotypical fun and interesting people determined to make the world a better place. In other words, no, you do not need a stereotypical geek to be in computer science. You just need to like what you do and be code brave! 🙂

Big Bang Theory Penny Brave

Do you have to be a stereotypical geek to go into computer science?