Special

Introducing the “Welcome to Xojo” Bundle!

New to Xojo and looking for guidance? We've put together a terrific bundle to welcome you! Xojo Bundle

This bundle includes six back issues of the magazine -- all of year 19 in printed book and digital formats -- plus a one-year subscription (beginning with 20.1) so you'll be learning all about Xojo for the next year. It's the perfect way to get started programming with Xojo. And you save as much as $35 over the non-bundle price!

This offer is only available for a limited time as supplies are limited, so hurry today and order this special bundle before the offer goes away!

Article Preview


Buy Now

Issue 20.4 ('Xojo Jigsaw')
Instant purchase and download via GumRoad!

FEATURE

Xojo Jigsaw

Making a Digital Jigsaw Puzzle With Xojo

Issue: 20.4 (July/August 2022)
Author: Marc Zeedar
Author Bio: Marc taught himself programming in high school when he bought his first computer, but had no money for software. He's had fun learning ever since.
Article Description: No description available.
Article Length (in bytes): 49,768
Starting Page Number: 46
Article Number: 20405
Resource File(s):

Download Icon project20405.zip Updated: 2022-06-30 18:35:57

Related Link(s): None

Excerpt of article text...

The concept of a digital jigsaw puzzle isn't new. There are certainly dozens, if not hundreds, of such games on the web and various app stores (see Figure 1). But I've always had an interest in making my own.

That's partly so I can customize it to work the way I want it to work, but also for the challenge: I had no idea how to do such a thing and it seemed intimidating. I'd have to figure out how to draw puzzle shapes, cut pictures out in those shapes, allow the user to drag said shapes around and overlap other shapes, and detect when the correct shapes are successfully put together to complete the puzzle. It seemed like a lot of math and graphics calculations that are the opposite of my forte.

Recently, however, while working on articles covering Xojo's new PDF graphics, I noticed the graphics.clip command now allows you to pass in a path rather than just a rectangle. That gave me the idea: could I pass it a jigsaw puzzle piece shape? If so, I might be on track to making my own digital puzzle app!

There were still many other questions, of course, so I turned to the Internet and found an article on creating a jigsaw puzzle in HTML5 using Javascript (https://www.codeproject.com/articles/395453/html5-jigsaw-puzzle). Though it took some doing, I managed to recreate this code in Xojo, along with my own enhancements, and I created my own digital jigsaw puzzle app (see Figure 2)!

The App Structure

Since Xojo doesn't support a graphical concept such as sprites (see Figure 3), the first decision I needed to make was how I was going to build the puzzle pieces. My options were to use one large canvas for the whole window and draw each piece inside it, or to use separate canvas objects for each piece.

...End of Excerpt. Please purchase the magazine to read the full article.