HTML5 Game Development: 2D Platform Game Fundamentals from Udemy

In this course, you'll learn the basics of 2D game development using HTML5/Javascript and the excellent Phaser game engine. The course will focus on character movement for a platform game and introduce level creation using the Tiled level editor.

We'll cover how to build a character with various moves and animations. We'll use a physics engine to get the jump and horizontal movement feeling just right similar to classic games like Mario Bros. We’ll then create a simple platform game level and setup the collision logic for our character to interact with it.

Along the way to building a super fun 2D platform game, we’ll be looking at some best practices on structuring and architecting a game project by starting with a robust boilerplate that you can use for any game, as well as exploring the finite state machine pattern as a means of controlling our character’s movements and animations. This will give you a solid foundation for continuing your journey into game development and give you a kick start in creating a full blown game.

If any of the above sounds a bit daunting, don’t worry, the course videos will explain everything in a way that’s suitable even for a complete beginner. While a little familiarity with Javascript would be beneficial, we’ll be doing everything step-by-step in enough detail that you can follow along. Basically, if you have an interest in how 2D platform games work and would like to have a go at creating your own, this course is for you.

What's inside

Syllabus

Getting Started

Tools of the Trade

Project Starter Code

Introduction to Phaser

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses the Phaser game engine, which is known for its ease of use and suitability for 2D game development, making it accessible for beginners

Explores the finite state machine pattern, a valuable technique for controlling character movements and animations in game development

Covers level creation using the Tiled level editor, a popular tool in the game development industry for designing game environments

Focuses on character movement mechanics, which are fundamental to platform game design and provide a strong foundation for building engaging gameplay experiences

Requires familiarity with Javascript, which is essential for web development and game development using HTML5, potentially excluding learners without prior coding experience

Emphasizes structuring and architecting a game project, which is a best practice for creating maintainable and scalable games

Reviews summary

Html5 game development fundamentals with phaser

According to learners, this course provides a solid introduction to HTML5 game development, focusing specifically on creating a 2D platform game using the Phaser engine and Tiled level editor. Students learn core concepts like character movement, physics, animations, and managing game logic with a finite state machine. The course is designed to be beginner-friendly, even for those with limited JavaScript experience, offering step-by-step guidance. However, some learners note the course covers only fundamentals and may require additional learning for more complex game features. Potential issues with outdated setup instructions are also occasionally mentioned.

Good start, but limited scope.

"This course is a great starting point, but it only scratches the surface of Phaser."

"It teaches the fundamentals needed for a basic platformer, but not much beyond that."

"Don't expect to build a full commercial game; it's focused on the core mechanics."

Introduces architectural patterns.

"The introduction to Finite State Machines was a valuable concept for organizing code."

"Using FSM for character states made a lot of sense and improved structure."

"I appreciate learning this pattern; it's useful beyond just game development."

Designed for those new to game dev.

"As someone new to game development, I found this course very easy to follow."

"The step-by-step instructions make it accessible even if you only have basic JS."

"It didn't assume too much prior knowledge, which was perfect for me."

Focus on platformer movement/physics.

"The explanation of character movement, jumping, and physics felt just right."

"I finally understood how to implement platformer physics and collisions effectively."

"Learning how to handle character states and animations was a key takeaway for me."

Learn Phaser and Tiled basics.

"It provided me with a really good grasp of the Phaser 3 framework and Tiled integration."

"I gained a solid foundation in using the Phaser engine for basic game mechanics."

"The sections on Phaser and Tiled mapping were incredibly helpful for getting started."

Setup or library versions issues.

"I ran into some issues getting the project set up due to library version changes."

"The section on code completion seemed a bit outdated."

"Had to do some troubleshooting outside the course for certain technical hiccups."

Some JS background is helpful.

"While beginner-friendly for game dev, a little JavaScript knowledge definitely helps a lot."

"If you're completely new to coding, the JS parts might be a bit challenging initially."

"I was glad I had some prior JS experience before starting this course."

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 HTML5 Game Development: 2D Platform Game Fundamentals with these activities:

Review JavaScript Fundamentals

Show steps

Strengthen your JavaScript foundation to better understand the Phaser game engine and game logic.

Browse courses on JavaScript Fundamentals

Show steps

Review variables, data types, and operators.
Practice control flow statements (if/else, loops).
Study functions and object-oriented programming concepts.

Review 'Eloquent JavaScript'

Show steps

Solidify your JavaScript knowledge with a comprehensive guide that covers the language's core concepts.

View Eloquent JavaScript, 4th Edition on Amazon

Show steps

Read the chapters on data structures and functions.
Work through the exercises at the end of each chapter.

Follow Phaser Tutorials

Show steps

Gain hands-on experience with Phaser by following tutorials that cover various game development aspects.

Show steps

Find Phaser tutorials on the official Phaser website or other reputable sources.
Follow tutorials on topics like sprite animation, collision detection, and input handling.
Adapt the tutorial code to your own game ideas.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Create a Simple Platformer Level Editor

Show steps

Apply your knowledge of Phaser and level design by creating a basic level editor.

Show steps

Design a simple interface for placing tiles.
Implement functionality to save and load levels.
Integrate the level editor with your Phaser game.

Review 'Game Programming Patterns'

Show steps

Learn common game programming patterns to improve your code structure and maintainability.

View Crafting Interpreters on Amazon

Show steps

Read the chapters on state machines and command patterns.
Apply these patterns to your own game projects.

Document Your Game Development Process

Show steps

Reinforce your understanding by documenting the steps you took to create your game.

Show steps

Write blog posts or create videos about your game development journey.
Explain the challenges you faced and how you overcame them.
Share your code and assets with the community.

Contribute to a Phaser Plugin

Show steps

Deepen your understanding of Phaser by contributing to an open-source plugin.

Show steps

Find a Phaser plugin on GitHub that you're interested in.
Identify a bug or feature that you can contribute.
Submit a pull request with your changes.

Career center

Learners who complete HTML5 Game Development: 2D Platform Game Fundamentals will develop knowledge and skills that may be useful to these careers:

HTML5 Game Programmer

An HTML5 game programmer specializes in developing games using HTML5, JavaScript, and associated frameworks like Phaser. This course directly aligns with this role, helping to build skills in 2D game development using these technologies. The course focuses on character movement, level creation with Tiled, and best practices for game architecture. An aspiring HTML5 game programmer can use this knowledge to create interactive and engaging games for web and mobile platforms. Learning how to structure a project, implement a finite state machine, and handle collision logic prepares you for the challenges of developing your own games as an HTML5 Game Programmer.

See salaries and explore the career path for HTML5 Game Programmer

Game Developer

A game developer brings video game concepts to life through coding and design. This course helps build a foundation in 2D game development using HTML5, JavaScript, and the Phaser game engine, all essential tools for a game developer. By focusing on character movement, level creation using Tiled, and best practices in game architecture, this course lays the groundwork for creating complex and engaging games. Learning how to structure a game project, implement a finite state machine for character control, and handle collision logic prepares you for the challenges of developing your own games as a game developer.

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 video games. This course may be useful for someone wanting to become an indie game developer, providing a strong foundation in 2D game development using HTML5, JavaScript, and the Phaser game engine. The course helps build skills in character movement for a platform game and introduces level creation using the Tiled level editor. By learning how to structure a game project, implement a finite state machine, and handle collision logic, an indie game developer might create a complete and polished game from start to finish.

See salaries and explore the career path for Indie Game Developer

Level Designer

A level designer creates the environments and layouts in video games, focusing on gameplay flow, challenges, and aesthetics. This course helps build practical skills in level creation using the Tiled level editor, a tool specifically highlighted in the course description. You can learn how to design and implement levels with collision logic, foreground and background layers, parallax scrolling, and interactive elements like spikes and start locations. The course may be useful in providing a solid foundation for a level designer to create engaging and well-designed game environments, and can help you become a Level Designer.

See salaries and explore the career path for Level Designer

Educational Game Developer

An educational game developer creates video games designed to teach specific concepts or skills in an engaging and interactive way. This course helps build practical skills in 2D game development, focusing on character movement, level creation, and game architecture. An educational game developer might use this to implement educational content into a game format. The course's hands-on approach helps build a foundation for creating engaging and effective educational games.

See salaries and explore the career path for Educational Game Developer

Gameplay Programmer

A gameplay programmer focuses on implementing the mechanics and systems that make a video game engaging and fun to play. This course may be useful because it delves into character movement, collision logic, and finite state machines. A gameplay programmer uses these to control character animations and behaviors. The course may be useful in providing a practical understanding of how to bring game mechanics to life through code. The hands-on approach to building a 2D platform game helps a gameplay programmer develop problem-solving skills and a deeper understanding of game development principles.

See salaries and explore the career path for Gameplay Programmer

Game Designer

A game designer is responsible for the creative vision and design of a video game, including its mechanics, story, and overall experience. This course helps build practical skills in 2D game development, focusing on character movement, level creation using Tiled, and best practices for game architecture. The course's hands-on approach may be useful for a game designer to create and prototype game ideas, test mechanics, and understand the technical limitations and possibilities of game development. Learning how to implement a finite state machine for character control and collision logic may be useful in designing engaging and immersive gameplay experiences. A game designer may be required to communicate ideas with a team, and this course helps build those communication skills.

See salaries and explore the career path for Game Designer

Front-End Developer

A front end developer focuses on building the user interface and experience for websites and web applications. This course may be useful as it teaches HTML5, JavaScript, and game development principles, all of which are highly relevant to front end development. The course helps to build skills in structuring projects and implementing interactive elements. These are skills that are directly transferable to creating dynamic and responsive user interfaces. A front end developer can leverage the knowledge gained to create engaging web experiences.

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

Mobile Game Developer

A mobile game developer creates games for mobile devices, often using specialized frameworks and languages. Although this course uses HTML5 and JavaScript, the fundamental game development principles taught are applicable to mobile game development. This course helps build a strong understanding of game architecture, character movement, and level design. A mobile game developer needs to understand these core concepts to create engaging and functional mobile games. The course's focus on structuring a game project and implementing a finite state machine may be useful in developing mobile games.

See salaries and explore the career path for Mobile Game Developer

Game Engine Developer

A game engine developer works on the underlying technology that powers video games, creating tools and systems for other developers to use. Although this course focuses on using the Phaser game engine rather than building one from scratch, understanding how a game engine works is beneficial. This course can help you explore fundamental game architecture, character movement, and collision logic. This course may be useful for a game engine developer to understand the needs and challenges of game developers. This helps them create more effective and user-friendly engine features.

See salaries and explore the career path for Game Engine Developer

Web Developer

A web developer builds and maintains websites and web applications, often requiring a strong understanding of front end technologies. Web developers may find this course useful since it teaches HTML5, JavaScript, and fundamental game development skills. The principles of structuring a project, handling user input, and creating interactive elements may be useful when building dynamic websites. This course may be useful in expanding a web developer's skill set and providing new perspectives on web development.

See salaries and explore the career path for Web Developer

Software Engineer

A software engineer designs, develops, and tests software applications. This course may be useful because it introduces fundamental programming concepts using HTML5, JavaScript, and the Phaser game engine. Through learning about character movement, level creation, and game architecture, the course helps build problem-solving and coding skills that are valuable to a software engineer. Understanding how to structure a project and implement finite state machines may be useful in building more complex software applications.

See salaries and explore the career path for Software Engineer

Technical Artist

A technical artist bridges the gap between art and programming in video game development, optimizing assets and creating tools to improve the art pipeline. This course may be useful as it provides a foundation in game development principles, including character movement and level creation which interact heavily with art assets. This course may be useful for a technical artist to understand the technical constraints and requirements of game development. A technical artist can facilitate more effective collaboration between artists and programmers.

See salaries and explore the career path for Technical Artist

AR/VR Developer

An augmented reality or virtual reality developer creates immersive experiences using specialized hardware and software. Although this course focuses on 2D game development, the fundamental principles of game design and programming it teaches are broadly applicable. Understanding how to structure a project, handle user input, and implement game mechanics may be useful for an AR/VR developer, and is therefore useful. This course may be useful in providing a foundation for building immersive and engaging AR/VR experiences.

See salaries and explore the career path for AR/VR Developer

Simulation Developer

A simulation developer creates software that models real-world systems or processes for training, research, or entertainment purposes. This course may be useful as it introduces fundamental programming concepts using HTML5, JavaScript, and the Phaser game engine. This course might help build problem-solving and coding skills which can be valuable to a simulation developer. Understanding how to structure a project and implement finite state machines may be useful for creating accurate simulations, and may assist in the creation of a role as Simulation Developer.

See salaries and explore the career path for Simulation Developer

HTML5 Game Development

2D Platform Game Fundamentals

Here's a deal for you

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Html5 game development fundamentals with phaser

Activities

Career center

Featured in The Course Notes

Reading list

Share

Similar courses