PhaserJS Game Development from Udemy

Lead instructor at codecaptain.io, Sabatino Masala will teach you how to create an entire game in one of the hottest HTML5 game development framework called PhaserJS.

PhaserJS is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

This framework is the go-to HTML5 game development framework nowadays and in this course we'll explore the many aspects of Phaser, by creating a qualitative game called TapTapTaxi.

Sabatino trained over 900 students in person and improved his teaching approach over the years so students could strengthen their programming skills in an effective and fun course.

2016 marks his 10th year of being a game developer and over the years he released over 27 games, 18 of which reached over 1 million unique players.

All that attention didn't go unnoticed, because recently, one of the biggest companies in the gaming industry reached out to him, and that company was Nintendo. They made him a certified Nintendo developer, so you can rest assured you're in the right hands for learning a thing or two about game development.

This course is meant for students with some prior experience in webdevelopment and want to start learning game development in HTML5. This course will provide the source of every step in the lectures, so no need to worry when you're stuck somewhere.

All the assets will be provided and you're free to use them in any other project.

What will I learn in this course?

PhaserJS Game Framework
Create an isometric game
Managing assets using spritesheets
- Improve performance by decreasing draw calls
- Learn how spritesheets affect draw calls & performance
- Implement spritesheets
- Make effective use of GPU resources
OOP Javascript fundamentals
Jump mechanics
Hittesting & Hittesting using the distance formula
Implement sound effects using the PhaserJS built-in functions
Debug PhaserJS using easy plugins & Chrome devtools
- Learn to solve issues with confidence
Dazzling animations in PhaserJS
Create a fun, addictive & fast-paced gameplay
Generate random environments & buildings
Focussing on an impeccable user-experience

What's inside

Syllabus

Get to know your instructor

Welcome!

Get to know the project structure and do the initial setup

Getting started

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses PhaserJS, a popular and actively maintained 2D game framework, making it a relevant choice for modern HTML5 game development projects

Taught by a Nintendo-certified developer with over a decade of experience and numerous released games, suggesting practical and industry-relevant insights

Covers optimization techniques like spritesheets, which are essential for improving game performance, especially on mobile devices

Includes debugging techniques using Chrome devtools, which are valuable for identifying and resolving issues during game development

Focuses on creating a complete game, providing a hands-on learning experience and a tangible project for the portfolio

Relies on Javascript fundamentals, so learners without a basic understanding of Javascript and web development may find the course challenging

Reviews summary

Hands-on phaserjs game introduction

According to learners, this course offers a practical, project-based introduction (positive) to PhaserJS game development. Many appreciate the step-by-step approach (positive) to building a complete isometric game, praising the clear explanations (positive) and the instructor's real-world expertise (positive). The provision of assets and source code (positive) is frequently highlighted as helpful. Some reviews note that having a solid JavaScript foundation (neutral) is important to keep pace, and a few mention potential issues with Phaser version compatibility (warning) over time. Overall, it's seen as a strong starting point for web developers venturing into HTML5 game creation.

Access to source code and assets for the project.

"Having the source code available for every step was a lifesaver when I got stuck."

"The game assets provided were high quality and very useful, saving a lot of time."

"Great to have all the assets provided so I could focus purely on the code and concepts."

Instructor is experienced and explains well.

"The instructor clearly knows PhaserJS and game dev. His explanations were easy to follow."

"Sabatino's teaching style is engaging and makes complex ideas understandable."

"You can tell the instructor has real-world experience, which adds value to the lessons."

Create a full isometric game step-by-step.

"Loved building a complete game from scratch; it really helps learning."

"The project approach made learning fun and practical. Ending up with a playable game is rewarding."

"Following along to build the TapTapTaxi game solidified my understanding of Phaser concepts."

"It's great to finish the course with a working game example I can expand on."

Focused on one game; less on broader Phaser.

"Learned a lot about building *this* specific game, but wish it covered more general Phaser features."

"Good introduction, but you'll need other resources for a deep dive into all Phaser capabilities."

Need prior web dev/JS experience to follow easily.

"Definitely need a solid grasp of JavaScript before taking this course, it moves fast."

"Some parts felt a bit challenging without a strong web development background already."

"Prior JS knowledge is essential to keep up with the coding sections."

Course may use older Phaser version.

"Ran into a few problems because the Phaser version used in the course is older than the current one."

"Had to spend time looking up changes and compatibility issues with newer Phaser versions."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in PhaserJS Game Development with these activities:

Review JavaScript Fundamentals

Show steps

Solidify your understanding of JavaScript fundamentals, especially object-oriented programming (OOP), as PhaserJS relies heavily on these concepts.

Browse courses on JavaScript Fundamentals

Show steps

Review basic syntax and data types.
Practice creating and using objects and classes.
Study inheritance and polymorphism.

Review 'Eloquent JavaScript'

Show steps

Gain a deeper understanding of JavaScript, which is essential for effectively using the PhaserJS framework.

View Eloquent JavaScript, 4th Edition on Amazon

Show steps

Read the chapters on object-oriented programming and functions.
Work through the exercises at the end of each chapter.

Follow PhaserJS Tutorials

Show steps

Refine your PhaserJS skills by following online tutorials that cover specific game mechanics or features.

Show steps

Search for tutorials on topics like collision detection or animation.
Follow the tutorial step-by-step, adapting the code to your own project.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Implement Jump Mechanics

Show steps

Reinforce your understanding of jump mechanics by implementing different jump styles and variations in a simple PhaserJS project.

Show steps

Create a basic PhaserJS scene with a player sprite.
Implement a simple jump using velocity.
Experiment with different jump heights and durations.
Add coyote time and jump buffering for improved feel.

Review 'HTML5 Game Development by Example'

Show steps

Expand your knowledge of game development techniques and gain inspiration for your own PhaserJS projects.

View Putting Knowledge to Work on Amazon

Show steps

Browse the book for examples that are relevant to your interests.
Study the code and adapt it to your own PhaserJS projects.

Create a Simple Platformer Game

Show steps

Test and solidify your PhaserJS skills by creating a complete, albeit simple, platformer game from scratch.

Show steps

Plan the game's features and design the levels.
Implement player movement, including jumping and collision detection.
Add enemies and obstacles.
Implement a scoring system and a game over state.

Contribute to a PhaserJS Open Source Project

Show steps

Deepen your understanding of PhaserJS by contributing to an open-source project, learning from experienced developers and contributing to the community.

Show steps

Find a PhaserJS project on GitHub.
Identify a bug or feature you can contribute to.
Submit a pull request with your changes.

Career center

Learners who complete PhaserJS Game Development will develop knowledge and skills that may be useful to these careers:

HTML5 Game Developer

An HTML5 Game Developer specializes in creating games that can be played directly in web browsers. The role generally involves using technologies like JavaScript, HTML5 Canvas, and WebGL. The PhaserJS Game Development course directly aligns with this career path by teaching how to use the PhaserJS framework, a leading tool for HTML5 game development. The course's focus on creating an isometric game and managing assets using spritesheets are particularly relevant skills. The course also explores Javascript object oriented fundamentals, which are very helpful to an HTML5 Game Developer. The course may also give you experience in debugging using Chrome devtools.

See salaries and explore the career path for HTML5 Game Developer

Game Programmer

A Game Programmer writes the code that brings a game to life, implementing game mechanics, artificial intelligence, and user interfaces. The PhaserJS Game Development course is directly applicable to this role, as it teaches how to use the PhaserJS framework to create games. You may learn to create a game from scratch, manage assets, implement game mechanics, and optimize performance. The course's coverage of debugging and Javascript object oriented fundamentals can provide a solid footing for a Game Programmer. This course may give you the opportunity to hone valuable skills that can be directly applied to game development projects.

See salaries and explore the career path for Game Programmer

Web Game Developer

A Web Game Developer focuses on creating games that are played directly within web browsers. This often involves using technologies like HTML5, JavaScript, and associated frameworks. The PhaserJS Game Development course is directly relevant to this role, as it teaches how to use the PhaserJS framework for creating HTML5 games. This course may give you direct experience creating a qualitative game, TapTapTaxi. The course's focus on optimizing performance and creating engaging gameplay mechanics can also be beneficial in attracting and retaining web game players. This course may also provide a strong foundation to help you create user-friendly and exciting web-based gaming experiences.

See salaries and explore the career path for Web Game Developer

Game Developer

The role of a Game Developer is to create engaging and interactive experiences for players. A Game Developer often works with various tools and frameworks to bring game ideas to life. This course in PhaserJS Game Development could be especially helpful as it focuses on a popular HTML5 game framework. Emphasis on creating an entire game, TapTapTaxi, helps build a portfolio piece that shows practical experience. Learning to implement sound effects, animations, and focus on user experience can distinguish a Game Developer in a competitive market. Furthermore, this course may give you insights into optimizing game performance using spritesheets and debugging using Chrome devtools.

See salaries and explore the career path for Game Developer

Indie Game Developer

An Indie Game Developer works independently or in a small team to create and publish their own games. This role requires a wide range of skills, from programming and game design to art and marketing. The PhaserJS Game Development course is valuable because it provides hands-on experience in creating a complete game using a popular framework. This course may help you learn how to manage game assets, implement game mechanics, and focus on user experience. Furthermore, the course's coverage of debugging and performance optimization can be crucial for indie developers who often have limited resources. This course may also provide a solid foundation in Javascript object oriented fundamentals.

See salaries and explore the career path for Indie Game Developer

Mobile Game Developer

A Mobile Game Developer creates games specifically designed for mobile devices, such as smartphones and tablets. This involves understanding the unique constraints and opportunities of mobile platforms. The course in PhaserJS Game Development can be beneficial, as PhaserJS supports mobile web browsers. The knowledge gained from creating the TapTapTaxi game and optimizing performance for web browsers can also be applied to mobile game development. Furthermore, learning about user experience and creating addictive gameplay are crucial aspects of mobile game development. This course may help you to create immersive experiences that maximize user engagement, which is highly sought after in this role.

See salaries and explore the career path for Mobile Game Developer

Educational Game Developer

Educational Game Developers design and create games that aim to teach players specific skills or knowledge. The PhaserJS Game Development course can be very valuable, as it provides a solid foundation in creating engaging and interactive games. You may learn how to implement game mechanics, manage assets, and focus on user experience, all of which are crucial for developing effective educational games. The course's hands-on approach and focus on the PhaserJS framework can also help you to quickly prototype and develop educational game concepts. Educational games also benefit from an impeccable user experience.

See salaries and explore the career path for Educational Game Developer

Multimedia Programmer

Multimedia Programmers specialize in developing interactive software that integrates various media elements like video, audio, and animations. The PhaserJS Game Development course relates well to this role, as it focuses on creating interactive games with sound effects and animations. You may learn how to implement these elements within the PhaserJS framework, gaining practical experience in multimedia programming. The course's emphasis on user experience and creating engaging gameplay can also translate to creating compelling multimedia applications. Multimedia Programmers often implement sound effects, which this course covers, using PhaserJS built-in functions.

See salaries and explore the career path for Multimedia Programmer

Game Designer

A Game Designer conceptualizes and designs the mechanics, rules, and overall experience of a game. While not directly a programming role, understanding game development is crucial. The PhaserJS Game Development course may be helpful because it provides insight into the technical aspects of game creation. Learning how to implement game mechanics, create engaging gameplay, and optimize performance can inform design decisions made by the designer. You may gain insight into the limitations and possibilities afforded by the PhaserJS framework. The course's focus on user experience can also help the designer to craft compelling and enjoyable player experiences. Having experience creating a game and focusing on user experience is a plus for any Game Designer.

See salaries and explore the career path for Game Designer

Technical Artist

A Technical Artist bridges the gap between artists and programmers, ensuring that art assets are efficiently integrated into a game. Knowledge of game engines and optimization techniques are important. The PhaserJS Game Development course may equip a Technical Artist with a better understanding of how art assets are used within the PhaserJS framework. You may learn about implementing spritesheets, optimizing performance, and debugging, which are valuable skills for ensuring art assets work smoothly in a game. The hands-on experience gained in the course can also help you to communicate more effectively with both artists and programmers. Spritesheets are of particular importance to Technical Artists.

See salaries and explore the career path for Technical Artist

Simulation Developer

Simulation Developers create software that simulates real-world or hypothetical scenarios for training, research, or entertainment purposes. This role can benefit from the skills taught in the PhaserJS Game Development course, especially in areas like creating interactive environments and managing object interactions. You may use Javascript object oriented fundamentals taught in this course. The course's coverage of game mechanics, such as hit detection and physics, can also be applied to simulation development. You may leverage your ability to generate random environments and buildings within PhaserJS.

See salaries and explore the career path for Simulation Developer

Front-End Developer

A Front End Developer focuses on building the user interface and interactive elements of websites and web applications. While not directly focused on game development, the PhaserJS Game Development course may help to improve your JavaScript skills. Furthermore, learning about user experience and creating engaging interfaces can be valuable skills for a Front End Developer. The focus on creating a fun and addictive gameplay may influence and improve your own front end design. Chrome devtools can also be used for front end development.

See salaries and explore the career path for Front-End Developer

Software Engineer

A Software Engineer designs, develops, and tests software applications. While not specific to game development, the fundamental programming skills learned in the PhaserJS Game Development course can be transferred to other software development contexts. You may gain experience working in Javascript, debugging with Chrome devtools, and structuring projects. The problem-solving and logical thinking skills honed through game development can also be valuable assets for a Software Engineer. The Javascript object oriented fundamentals may be of particular use to a Software Engineer.

See salaries and explore the career path for Software Engineer

Augmented Reality Developer

Augmented Reality Developers create applications that overlay digital content onto the real world, often using mobile devices or specialized hardware. While seemingly disparate, skills gained in the course may translate. You may leverage knowledge of JavaScript to create a robust frontend, and implement sound and UI elements to create a rich augmented reality experience. You may also leverage the knowledge acquired on how to create a fast pace gameplay and optimize performance.

See salaries and explore the career path for Augmented Reality Developer

Virtual Reality Developer

Virtual Reality Developers create immersive experiences that users can interact with using VR headsets and other specialized equipment. Knowledge of game engines like Unity or Unreal Engine is often required, but the fundamental skills learned in the PhaserJS Game Development course may be beneficial. You may gain a better understanding of game mechanics, user experience, and performance optimization. This understanding may provide a foundation for learning more advanced VR development techniques, especially related to creating engaging and interactive virtual environments.

See salaries and explore the career path for Virtual Reality Developer