Game dev 101 part 2
Download as PPTX, PDF0 likes95 views
Programming a game involves several phases: setup, running the game, listening for user input and enemy movement, handling world events, and tracking state changes. It is like following a recipe by defining variables for data like eggs and sugar, and functions for actions like whisking and baking. JavaScript and Canvas allow drawing on a web page, like loading an image for a player ship and painting a background. The next step is adding movement to the space game.
Game dev 101 part 2
- 1. Game development 101, part 2 – game dev programming Chris Noring @chris_noring
- 2. What did you build?
- 4. Constructing a game – the phases - setup, - Create the world - Create you + enemies - General setup - Listens to input from - User, are you moving the avatar? - Enemy movement, moves towards you or other patterns, - World events, is there a timer we need to care about, other things? - State changes, Check for state changes - You died - You won - Something happened, you: - Picked up a coin - Picked up extra life - Went into building, sewer pipe (mario) - Enemy died, adjust no of enemies
- 5. Programming Get the machine to do what you want
- 6. Programming a set of instructions verbs – something you do nouns, data Crack eggs Add sugar Whisk eggs and sugar Add flour Whisk flour eggs and sugar Set owen to 200 C Bake 20 min
- 7. Turn nouns and verbs to variables to programming // data, nouns let eggs = 3; let bowl = new Bowl(); let sugar = 200; // ml let owen = new Owen(); let cakepan = new CakePan(); • Crack eggs • Add sugar • Whisk eggs and sugar • Add flour • Whisk flour eggs and sugar • Set owen to 200 C • Bake 20 min // functions , what you do, verbs addIngredient(sugar, bowl); addIngredient(eggs, bowl); whisk(bowl); addIngredient(flour, bowl); whisk(bowl); cakepan.fill(bowl); owen.setTemperature(200); owen.bake(cakePan);
- 8. Variables and functions let firstNumber = 3; let secondNumber = 5; let sum = firstNumber + secondNumber; function calc(first, second) { return first + second; } let sum = calc(firstNumber, secondNumber); Variable name Variable value Function body, what it does Function keyword Function name Parameters
- 9. Draw on the web • JavaScript, the programming language • Canvas, we can paint things on it like: • Images • Primitives like rectangles • Let’s paint someting: index.html app.js <html> <head> <body> <canvas id="myCanvas" width="200" height="100"> </canvas> <script src=”app.js”></script> </body> </head> </html> // draws a red rectangle //1. get the canvas reference canvas = document.getElementById("myCanvas") //2. set the context to 2D to draw basic sha ctx = canvas.getContext("2d"); //3. fill it with the color red ctx.fillStyle = 'red’; //4. and draw a rectangle with these paramet setting location and size ctx.fillRect(0,0, 200, 200) // x,y,width, he
- 10. Space game, set up • Load asset (your ship) • Let’s paint an image, your ship • Let’s paint a background function loadAsset(path) { return new Promise((resolve) => { const img = new Image(); img.src = path; img.onload = () => { // image loaded and ready to be used resolve(img); } }) } async function run() { const heroImg = await loadAsset('hero.png’) canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); ctx.drawImage(heroImg, canvas.width/2,canvas.height/2); } run();
- 11. Next time, space game, movement
- 12. Summary Programming is like cooking, a set of instructions A game has phases • Setup • Running • Listen for user input • Enemy movement • World events State changes, takes the game forward • You or enemy dies • Picks up coin, you level, level is changed etc.
Editor's Notes
- #10: DOM tree, what a page is, a list of hierarchical nodes, that we can change Canvas, what we can point on, also a Node A canvas a has a contexr, what we actually interact with when we paint something