Article Preview

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):

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.