Marker-Based Games with AR.js for Beginners

Course

Online

Price on request

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

Create unique augmented reality experiences by mastering AR.js – a lightweight, open-source library for the web!

Based on A-Frame and Three.js – frameworks designed for virtual reality and 3D experiences on the internet – AR.js allows you to create AR apps that can be accessed on the web with any WebGL compatible device. Through this course, you’ll take your first steps with the library and learn to build a marker-based jigsaw puzzle game that uses AR and image markers to display a custom picture. Not only will you get to explore the AR.js library and its various features, but you’ll also develop skills with image markers and image tracking which can be applied to a wide variety of augmented reality projects!

You will learn how to:

Understand AR
Set up AR.js for web projects
Implement image capturing
Slice images into pieces through code
Track image marker position and rotation
Detect win conditions based on marker images

… and more!

Frameworks and tools covered: A-Frame 1.0.4, AR.js 3.0.0

Your Courses, Your Way

All of our project-based courses are designed to be flexible – you can access courses 24/7 to fit them around your schedule, and choose the learning materials that suit you best.

You can even download your course videos and watch them offline using the Zenva app, available on iOS and Android.

Learn from World-Class Instructors

Our course instructors participate in elite developer programs and have been recognized for their demonstrated excellence in development and teaching.

That way, you can be confident that you’re learning the most up-to-date content from industry experts.

Interactive Lessons with Codemurai

Our unlimited access package comes with free access to all of the courses in our mobile app, Codemurai!

Available on iOS and Android, it’s full of interactive programming lessons and exercises so you can continue your learning on the go.

Achieve Real Results

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

b
Why should I learn programming?
b
What will I achieve by taking these courses?
b
Technology changes quickly. What happens if the content becomes outdated?
b
I’m an absolute beginner who’s never coded before. Can I still do these courses?
b
What time commitment is needed?
b
Will these courses help me to change my career?
b
Can I watch the videos offline?

Fundamental understanding of HTML, CSS, and JavaScript
Basic understanding of the A-Frame framework

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 2 years

Subjects

  • Access
  • Image
  • Web

Course programme

Introduction 1:59


Introduction 1:59



1:59

History of Augmented Reality 10:43


History of Augmented Reality 10:43



10:43

Setup Development Environment 9:18


Setup Development Environment 9:18



9:18

What is AR.js and A-Frame 9:45


What is AR.js and A-Frame 9:45



9:45

Hello AR World 9:07


Hello AR World 9:07



9:07

Structure the Scene 9:38


Structure the Scene 9:38



9:38

Adding Style 10:03


Adding Style 10:03



10:03

getUserMedia() and takePhoto() - Part 1 7:51


getUserMedia() and takePhoto() - Part 1 7:51



7:51

getUserMedia() and takePhoto() - Part 2 6:35


getUserMedia() and takePhoto() - Part 2 6:35



6:35

getUserMedia() and takePhoto() - Part 3 4:39


getUserMedia() and takePhoto() - Part 3 4:39



4:39

createImagePieces() - Part 1 9:42


createImagePieces() - Part 1 9:42



9:42

createImagePieces() - Part 2 10:05


createImagePieces() - Part 2 10:05



10:05

Shuffle Puzzle 8:49


Shuffle Puzzle 8:49



8:49

Check Distance to Win - Part 1 9:29


Check Distance to Win - Part 1 9:29



9:29

Check Distance to Win - Part 2 10:10


Check Distance to Win - Part 2 10:10



10:10

Conclusion 1:08


Conclusion 1:08



1:08

Additional information

On-demand, 24/7 access 2.2 hours of video Certificate of completion Source code and PDF notes Closed captions

Marker-Based Games with AR.js for Beginners

Price on request