Tutorial: Create your own App quality Maze

ate your own App quality mazeWe’ve noticed that many of you are using the Sketchpad widget to create some fab maze puzzles, and although this works well, we don’t think it gives the best possible results. So we decided to create a new widget dedicated to this timeless puzzle.

As simple as the Maze is, this is possibly one of the most complex widgets we’ve created so far.  The Maze online generator has so many customization options that you’re able to create unique, App quality puzzles for your Multi-Touch books created with iBooks Author in no time.  And best of all, it’s FREE of course.

Some a-mazing features of this new widget include:

  • Either upload your maze graphic or, get the generator to create a maze for you.
  • Add a custom background and specify font sizes and colors.
  • Optionally upload your own maze character to follow the reader’s finger path.
  • Optionally upload items for the character to collect along the way e.g. jewels
  • The game calculates and displays distance traveled and the score.
  • Upload win/loose graphics.
  • Readers can share their completed maze by email, Twitter and Facebook.

So now it’s time for you to have some fun! The Maze widget is now available for you to download in the free widget library and here is a simple tutorial on how you can put one together:

Click here to download the example files

Click here to download the example files

 

1. Create a book on your BookShelf

Screenshot of your Bookry BookShelf

To generate your widget you first need to login to Bookry and create a new book on your BookShelf. This simply creates a private project area for your book which holds all your widgets together in one place as you work on them.

There are several ways to get started:

  1. Go to ‘My BookShelf’ in the top black Bookry Toolbar. Then click on the large green ‘+’ symbol under ‘Books I am Writing’. This will bring up a pop-up window which prompts you to give your new book a title and then generates the book. You are taken to the book’s ‘Settings Page.’
  2. Going to ‘Author Tools’ in the top black Bookry Toolbar and selecting ‘Start a New Book’ will also bring up the pop-up window.

(Note: You do not need to upload your actual book to Bookry to create widgets. You only need to upload your iBooks Author file if you want to share it with others via The Gallery or your public/private BookStore.)

2. Generate the widget

Generating a widget using the online Bookry generator is super easy and this is how you do it:

Select Maze from the list of widgets

Select Maze from the list of widgets

From you book’s ‘Settings Page’ click on the blue ‘Add Widget’ button. This will bring up a list of all widgets in the Bookry Widget Library. Selecting the pink ‘Maze’ widget will automatically take you to the ‘Widget Settings’ page – this is the widget generator. So now we’re going to create the widget. First give your widget a name. Only you will see this name, so call it whatever you like. Next we need to complete the ‘Static Settings’ and ‘Live Settings’ for the widget.

Static Settings:

  • iBooks Author Page Orientation – Select landscape or portrait.
  • Branding & logo – This is where you can add your own branding if you want to.
  • Cover and Startup images – this is the icon that readers will tap on to open your widget.  Use the default or upload your own.
  • Background – This will appear behind your maze.   If you don’t upload a background it will be white.  I’ve uploaded a black custom background I’ve made, called ‘background.png’ in the folder you downloaded.

Scoring:

  • Distance Traveled – You can choose whether or not to display this and then set the score background if required.  I do want it displayed, so I’ve checked the box and changed the text to read ‘Web Steps’. I’ve also made the background transparent.
  • Prizes Text – Again, you can choose whether or not to display this, and then choose a font for the scoring display. I’ve checked the box so that it’s displayed and changed the font to ‘Futura’ at 28 points, color #27EBEA.

Path Drawing:

  • Path Color & Weight: You can choose whether or not you want the reader’s path to appear on the maze.  If you do, check the box and select the color of the path and its width. Using the color picker I’ve chosen #FFFFFF at 4px.

Completing the Maze:

  • Win Graphics – In this section you can set what happens when the reader completes the maze.  You can upload a new win image and also enable/disable the share images.  By ticking the ‘Allow Sharing’ box the reader will be prompted to share a png of their completed maze by email, Facebook and Twitter.

Live Settings:

(Currently the only live setting in Maze is the title. However we’re working on making these options available so keep an eye out for that soon.)

  • Title – Give your maze a title. This will appear on the black bar at the top of your widget.
  • Maze – This is where you create your actual maze.  You can either upload your own image, or as the generator to create one for you:

    Bookry Maze SettingsUpload – If you choose to upload your own image, make sure that it is transparent ie. the only thing you can see are the lines of the maze. I want to use my own image so I’ve clicked on ‘Select image’ to upload ‘maze.png’ from the example folder.

    Generate – If you want the generator to create a maze for you, click on the blue ‘Generate a maze for me’ button, which will bring up a pop-up window.  Enter the number of rows and columns – the higher the numbers, the more complex the maze.

  • Player – Here’s where you upload a player image for readers to guide through the maze.  I’ve uploaded an image of a spider, called ‘spider.png’ in the example folder. If you’ve used an auto-generated maze, the player image will appear at the beginning of the maze, under ‘Maze Designer’ below, in the right place.  If you’ve uploaded your own maze image, you need to manually move the player image to the start of the maze, so that the widget knows where the start is. Tip: if you’ve uploaded your own maze graphic, you must ensure that your character image is small enough to fit though the maze outline, if not, it will get stuck. You can change the size of the player here if you need to – I’m changing mine from the default 40×40 to 35x35px.
  • Finish – You can now upload the finish image.  I’ve uploaded a picture of a web, called ‘web.png’ in the example folder. Once uploaded you will see your finish image appear on the ‘Maze Designer’. If you’ve used an auto-generated maze, the finish image will appear at the end of the maze in the right place.  If you’ve uploaded your own maze graphic, you need to manually move the finish image to the end so that the widget knows where the end is.
  • Items – Finally, you can start adding some items for collection.  I’m only going to upload some ‘fly.png’ images from the example folder, but you can upload any number of different items. Click on ‘Select Images’ to upload your images and change the ‘Item value’ if you want to – you can have different values for different items.  Next, click on ‘Add’ and your item image will appear at the start of the ‘Maze Designer’. Move it to where you want it to be, and then repeat the process as often as you want to. I’ve placed 7 flies in my puzzle to be collected worth 10 points each.Bookry Maze Items

Save, Preview & Download:

And we’re done.  All that’s left to do is to ‘Save and Preview’ the widget.  ‘Preview’ lets you take a look at your widget online, so you can see what it may look like on your iPad – this can save time, as you don’t need to keep downloading the file to your Mac and dragging it into iBooks Author to test it.  Once you’re happy with the widget preview, you can then download the ‘.wdgt’ file to your Mac and drag it into iBooks Author.