Intro

Here you find all relevant information on the Artful Coding: web-based games development 2 course that takes place in summer term 2022 at dieAngewandte.

This page is intended to provide you all necessary links throughout the course as well as some background information on how the course is created. It also contains one of the Phaser 3 based game prototypes, you will work on throughout this course.

You will find below the links to all session materials, as well as some contact options to the lecturer. For the detailed announcment, including infos on registration, requirements and the grading schema, check out the Artful Coding: web-based games development 2 in the teaching base.

Basics from Artful Coding 1

While there is no formal requirement to participate in this course, we build on the Javascript coding and web development skills tought in the precursor course Artful Coding: web-based games development 1. Visit its website to check out what we did and get up to speed, in case you need a refresher on those basics. All content, including session recordings from last semester can be found there.

Sessions

The first half of the semester consists of weekly 1.5 hour sessions, which focus on introduction to concepts, tools, and practices, consolidated with accompanying exercises.

The second half consists of biweekly 3 hour blocks, focusing on concept work and team formation for your own games, and implementation of a game prototype.

• 9 March 2022, 15:00 – 16:30  : Intro, evaluation of expectations & tooling
• 16 March 2022, 15:00 – 16:30 : HTML Canvas: intro
• recording @ base cloud (~ 37min/155MB)
• 23 March 2022, 15:00 – 16:30 : HTML Canvas: animated and interactive
• recording @ base cloud (~ 50min/165MB)
• 30 March 2022, 15:00 – 16:30 : Jumping Block in Canvas
• recording part 1 @ base cloud (~ 30min/95MB)
• recording part 2 @ base cloud (~ 25min/75MB)
• recording part 3 @ base cloud (~ 21min/73MB)
• recording part 4 @ base cloud (~ 27min/111MB)
• 6 April 2022, 15:00 – 16:30  : Live Server & Phaser init & Jumping Block in Phaser
• There is no recording available for this session. Please refer to the extensive walk-through in the session plan, for all steps we did take in this session.
• 27 April 2022, 15:00 – 16:30 : reflection & workshop session
• This session is used to reflect on what we have done so far, and to work on any open assignments ans issues participants are struggling with.
• 04 May 2022, 15:00 – 16:30   : Website Mini Game – Part 1 & 2
• There is no recording available for this session. Please refer to the extensive walk-through in the session plan, for all steps we did take in this session.
• 11 May 2022, 15:00 – 16:30   : Website Mini Game – Part 3 & 4

• 25 May 2022, 15:00 – 18:00  : Brainstorming game ideas and team formation
• 8 June 2022, 15:00 – 18:00  : Concept refinement & first implementation steps
• 22 June 2022, 15:00 – 18:00 : Implementation ctd., project discussion, closing review

For the details on all the session content, including the exercises, take a look at the Artful Coding 2 - Session Plans document at hackmd.io, which will be updated alongside with the course.

References & Tools

There is an extensive reference section on the Artful Coding 1 site. Check it out for anything you need in terms of general web dev support and resources.

Here we'll only collect specific material on the HTML5 canvas and Phaser 3, which come up throught this course:

• MDN Canvas API docs, including a Canvas Tutorial
• W3schools Canvas Tutorial
• Phaser 3
• Live Server plugin for VS Code
• Explainers and background:
  • Web Dev Simplified: JavaScript ES6 Modules (8min on YouTube)
    and ES6 JavaScript Modules article @ Web Dev Simplified Blog
  • Mejin Leechor @ JavaScriptLA meetup: JavaScript Modules Past & Present (45min on YouTube)
• Inspirational:
  • Linda Liukas @ TEDxCERN: The poetry of programming (12min on YouTube)
  • Zach Latta @ TEDxYouth@Tallinn: The Art of Code (9min on YouTube)
  • Dylan Beattie @ NDC London 2020: The Art of Code (1h on YouTube)
  • The Python Programming Song (6min on YouTube) by Kim Ly Lam & Fynn Freund