Intro

Here you find all relevant information on the Artful Coding: web-based games development 2 course that takes place in summer term 2023 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 announcement, 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 focuses on the introduction to concepts, tools, and practices, which will be consolidated with accompanying exercises.

The second half then focuses on creating your own games from scratch, starting with brainstorming game ideas, first concept work, potential team formation, and implementation of a first game prototype.

All sessions take place from 17:00 – 18:30.

• 1 March 2023  CR13 : Intro, evaluation of expectations & tooling
• 15 March 2023 CR13 : HTML Canvas: intro
• 22 March 2023 CR13 : HTML Canvas: animated and interactive
• 29 March 2023 CR13 : Jumping Block in Canvas
• 19 April 2023 CR13 : Live Server & Phaser init & Jumping Block in Phaser
• 26 April 2023 CR13 : Website Mini Game – Part 1 & 2
• 3 May 2023    CR13 : Website Mini Game – Part 3 & 4

• 10 May 2023 CR13  : Brainstorming game ideas
• 24 May 2023 CR13  : Concept refinement
• 31 May 2023 CR13  : Prototyping & first implementation steps
• 7 June 2023 CR13  : Implementation & project discussion
• 21 June 2023 SR27 : Closing review

For the details on all the session content, including the exercises, take a look at the Artful Coding 2 - Session Plans hedgedoc, 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)
  • Esther Christopher: How Does JavaScript Work Behind the Scenes? JS Engine and Runtime Explained article @ freeCodeCamp blog
• 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