Game Design Practicum (CMPS 179) Summer 2012 Classes and Objects and the Canvas UC Santa Cruz CMPS 179 – Game Design Practicum courses.soe.ucsc.edu/courses/cmps179/Summer12/01 28 June, 2012

UC SANTA CRUZ Community  Remember that you are part of a community…

UC SANTA CRUZ Reminder  "If you qualify for classroom accommodations because of a disability, please submit your Accommodation Authorization Letter from the Disability Resource Center (DRC) to me during my office hours or by appointment, preferably within the first week of the Summer Session. Contact DRC by phone at for more

UC SANTA CRUZ Community  Remember that you are part of a community…  A community that the rest of the world is very excited about

UC SANTA CRUZ Community Beginning web developers Mobile and web application developers Web 2.0 business analysts, futurists, and investors Sociologists and economists Game designers You are here

UC SANTA CRUZ Resources  The Web Ahead – a web development podcast   TechCrunch – an insider look at the business behind Web 2.0   Hacker News – Reddit for people programming the web 

UC SANTA CRUZ Resources  AngelHack  “Jump start your startup at AngelHack's national hackathon competition, where you can win $75,000 in prizes and hack your way into meeting top angel investors and national media.”  StartupBus  “StartupBus, a multi-city Wi-Fi-enabled roadtrip to the South by Southwest Interactive conference with the goal of developing and launching startups by the time the travelers arrive in Austin, fired up the engines on its biggest year ever this week.”  SuperHappyDevHouse  “is a non-exclusive event intended for creative and curious people interested in technology. We're about knowledge sharing, technology exploration, and ad-hoc collaboration. Come to have fun, build things, learn things, and meet new people. It's called hacker culture, and we're here to encourage it.”

UC SANTA CRUZ Resources  Y Combinator – the preeminent incubator for web and technology startups   “In 2005, Y Combinator developed a new model of startup funding. Twice a year we invest a small amount of money (average $18k) in a large number of startups (currently 82). The startups move to Silicon Valley for 3 months, during which we work intensively with them to get the company into the best possible shape and refine their pitch to investors. Each cycle culminates in Demo Day, when the startups present to a large audience of investors. But YC doesn't end on Demo Day. We and the YC alumni network continue to help founders for the life of their company, and beyond.Demo Day  Since 2005 we've funded over 460 startups, including Loopt, Reddit, Clustrix, Wufoo,Scribd, Xobni, Omgpop, Weebly, Songkic k, Disqus, Dropbox, ZumoDrive, Justin.tv,Heroku, A Thinking Ape, Machine Zone, Posterous, Airbnb, Heyzap, Cloudkick,DailyBooth, WePay, Bump, Stripe, Ca rWoo, MixPanel, Cardpool, Optimizely, AeroFS,E la Carte, and Hipmunk.”LooptRedditClustrixWufooScribdXobniOmgpopWeeblySongkic kDisqusDropboxZumoDriveJustin.tvHerokuA Thinking ApeMachine ZonePosterousAirbnbHeyzapCloudkickDailyBoothWePayBumpStripeCa rWooMixPanelCardpoolOptimizelyAeroFSE la CarteHipmunk

UC SANTA CRUZ Resources  YetiZen – A new incubator for games companies   “The YetiZen Accelerator Program is focused entirely on game studio and emerging platform startups. We help game startups build and strengthen their business models, marketing strategies, and market position while simultaneously connecting them with our network of seed partners, angels and VCs. These companies are also given access to incredible partnership deals to accelerate their user acquisition and distribution.”  LOOK FOR: who are they funding, and why?  LOOK FOR: more incubators like this following the success of Y Combinator

UC SANTA CRUZ Moving from JSFiddle to Aptana Create or add all the resources (CSS, frameworks, and.js files)  You can just drag them into the project’s folder on the sidebar

UC SANTA CRUZ Moving from JSFiddle to Aptana …html… <script type= "text/javascript" src="jquery min.js"> <script type= "text/javascript" src="zebra.js"> …html…

UC SANTA CRUZ Moving from JSFiddle to Aptana …html… <script type= "text/javascript" src="jquery min.js"> <script type= "text/javascript" src="zebra.js"> …html… Be sure to put this first! The next.js file needs to be able to refer to it

UC SANTA CRUZ Moving from JSFiddle to Aptana JSFiddle JavaScript is wrapped inside a function that only runs once the page is loaded. This keeps it from running the JavaScript too early, which might result in the JS not being able to locate elements that haven’t loaded yet. So wrap the JavaScript in a function like this: $(document).ready(function() { // do something } Or window.onload = function() {}

UC SANTA CRUZ Quick Canvas Introduction How do you draw with JavaScript? Where do the graphics come from?

UC SANTA CRUZ Quick Canvas Introduction How do you draw with JavaScript? HTML5: Canvas!

UC SANTA CRUZ Quick Canvas Introduction How do you draw with JavaScript? HTML5: Canvas! Canvas Context

UC SANTA CRUZ Quick Canvas Introduction var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); Canvas Context

UC SANTA CRUZ Quick Canvas Introduction  Tutorial: drawing to the canvas  Create an object in the HTML   Draw something to the scene by getting the canvas and context var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 150); context.lineTo(450, 50); context.stroke(); Achievement: Use a loop to create multiple lines. Does it matter where you put the stroke() command?

UC SANTA CRUZ Quick Canvas Introduction Animation is … tricky  Clear the canvas Unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. The easiest way to do this is using theclearRect method.  Save the canvas state If you're changing any setting (styles, transformations, etc) which affect the canvas state and want to make sure the original state is used each time a frame is drawn, you need to save it.  Draw animated shapes The step where you do the actual frame rendering.  Restore the canvas state If you've saved the state, restore it before drawing a new frame. From:

UC SANTA CRUZ Quick Canvas Introduction Processing.js – all the power of Processing, Paper.js – great 2D animation graphics, more interaction-focussed than Processing Raphael – SVG graphics, runs on older browsers Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael

UC SANTA CRUZ Objects What’s an object?

UC SANTA CRUZ Objects Zebra name: someName legs: 4 speed:10 action: eatGrass

UC SANTA CRUZ Objects testZebra = { name:“Zippy", legs:4, speed:16 };

UC SANTA CRUZ Objects testZebra = { name:“Zippy", legs:4, speed:16 }; Why does this look familiar?

UC SANTA CRUZ Objects testZebra = { name:“Zippy", legs:4, speed:16 }; JSON { "to_user_id":396524, "to_user":"TwitterAPI", "from_user":"jkoum", "metadata": { "result_type":"popular", "recent_retweets": 109….. CSS body { color: purple; background-color: #d8da3d } ul { background-image: url(smallPic.jpg); background-repeat: repeat-y; color: green; }

UC SANTA CRUZ Objects testZebra = { name:“Zippy", legs:4, speed:16 }; testZebra.name + testZebra.speed = “Zippy16”

UC SANTA CRUZ Objects  Tutorial: make a zebra  Create an object zebra with some properties  Create some console.log() statements to test the contents of the object Achievement: for (p : zebra) { // do something } Will do something with each property in “zebra” Use it to print all the properties and their values.

UC SANTA CRUZ Objects What is an object? Objects are “hash tables” of “key-value” pairs

UC SANTA CRUZ Objects How else can you refer to properties? zebra.name = “Zippy”; zebra[‘name’] = “Zippy”;

UC SANTA CRUZ Objects  Tutorial: add to the zebra  Add a property to the zebra AFTER you have created it.  Create a list of properties [“homesOwned”, “netWorth”, “collegeDegrees”]  Add them all to the zebra and set them all to 0. Achievement: Add a property to the zebra that is a function That function can be run later with “zebra.myFxn.call(zebra, grass);”

UC SANTA CRUZ Objects Creating many Zebras function Zebra(name) { this.name = name; this.legs = 4; this.speed = 10; }

UC SANTA CRUZ Objects Creating many Zebras function Zebra(name) { this.name = name; this.legs = 4; this.speed = 10; this.x = Math.random(100); this.y = Math.random(100); }

UC SANTA CRUZ Objects  Tutorial: an array of zebras  Create an empty array of zebras  Add some zebras to it using myArray.push(newElement); Achievement: Start with an array of Zebra names Create a zebra for every element in the array function Zebra(name) { this.name = name; this.legs = 4; this.speed = 10; this.x = Math.random(100); this.y = Math.random(100); }

UC SANTA CRUZ Objects  Tutorial: drawing zebras  In the constructor function, add a function that takes a context object  And uses it to draw a circle at the zebra’s location  Create a loop that draws each zebra. Achievement: Figure out how to make a black and white circle, rotated randomly ctx.beginPath(); ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill();

UC SANTA CRUZ HW  Code Academy  Create an account and go through “JavaScript Fundamentals”   No need to do the “Projects” section  By Tuesday, you *MUST* have uploaded your RPG to a website. We will look at them on Tuesday in class  Practice your new JavaScript skills by adding  Some way to lose  Some way to win