Journey to the West Stage Play | Learn Python with Graphical Programming for Beginners 03

Meimei Mar 28.2023

0 3247 Easy

HARDWARE LIST

1 UNIHIEKR

1 Type-C&Micro 2-in-1 USB Cable

Journey to the West is a classic Chinese fantasy novel that tells the story of the kind-hearted Tang Sanzang (or Tripitaka), the powerful Sun Wukong (or Money King), the simple-minded Zhu Bajie (or Pigsy), and the honest Sha Wujing (or Sandy) on their journey to the "Western Regions" to obtain Buddhist sacred texts.

As a single board computer, UNIHIKER can used to create a short play and display it on the screen. In this lesson, we will display a short stage play featuring the master and his three disciples on the UNIHIKER screen.

Goal

Display dynamic characters of Tripitaka and Money King with their lines on the UNIHIKER screen, press the UNIHIKER button to make Pigsy and Sandy and their corresponding lines appear on the screen.

Get to Know

1. The loop structure in programming

2. The concept and naming conventions of objects in programming

3. How to use the A/B buttons on UNIHIKER

4. How to display images on the UNIHIKER screen.

Software: Mind+

Download address: https://www.mindplus.cc

Hands-on Practice

The stage play of Journey to the West mainly includes the background scene, dynamic performances of the master and disciples, and engaging dialogue. Additionally, the characters can be manually controlled to appear using buttons. To achieve this, let's break down the stage play into three tasks and complete them accordingly.

Task 1: Set up the initial stage scene

In this task, we will learn how to display images on the UNIHIKER screen, and then complete the initial stage scene by positioning Tripitaka and Monkey King in their appropriate places.

Task 2: Animate the characters

After the initial scene is displayed, we will learn how to switch images and change their positions to create animated effects for the characters.

Task 3: Make the characters appear one by one using buttons

In this task, we will learn how to operate the buttons on the UNIHIKER to control Pigsy and Sandy to appear on the screen one by one.

Task 1: Set up the initial stage scene

1. Hardware Connection

Connect UNIHIKER to the computer via a USB cable.

2. Software Preparation

Open Mind+, and follow the steps below to get it ready.

3. Write a Program

The initial scene of the stage play features a background image, as well as characters Tripitaka and Monkey King. Now we are going to learn how to display them on the UNIHIKER screen.

Let's display the background image on the screen first. It requires three steps: find the image, add it to the file in the project, and display it using commands.

Step 1: Find the image. In the appendix, locate the "background.png" image file in the "Lesson 3 > Image Material" folder.

Step 2: Add the image to the file in the project. Click on "File System" in Mind+'s "Shortcut Toolbar" area to open the file catalog, then drag the "background.png" image into the "File in the project".

After that, the image is successfully added to the project. The file catalog will display the complete name of the image file (as shown in the figure below):

Step 3: Display the image using commands. Look for the command containing the keyword "image" in the "Screen Display" under the "UNIHIKER" category in the command area, drag out the corresponding image display block Object name shows image "img.png" at X0Y0, and change "img.png" to the background image name "background.png". Then place the command under the preset code Python main program start.

Now, you can display the two images "Tripitaka1.png" and "Monkey King1.png" on the UNIHIKER screen in the same way. And you can determine their coordinates based on the UNIHIKER screen coordinates and their relative positions.

Note: By default, the X and Y coordinates of the images represent their top left corner.

The complete codes are shown in the figure below:

4. Run the Program

Click Run and see what will happen on the UNIHIKER screen.

Task 2: Animate the characters

1. Write a Program

The initial stage scene has been displayed in task 1. Next, we will learn how to animate the characters.

(1) Tripitaka Walking

To display the Tripitaka walking effect on the UNIHIKER screen, you will need multiple images of Tripitaka in different walking poses, which must be continuously switched in sequence to achieve the animation effect. Therefore, you should add all the Tripitaka walking images from the "Lesson 3 > Image Resources" folder to your project file and use the related command to switch between them.

The command for updating images is in the "Screen Display" under the "UNIHIKER" category. You can search for the command containing the keyword "Update image" and drag out the command Update image object image source is.

When using this command, it is necessary to specify which character’s image to be replaced, the image of Tripitaka or Monkey King. Generally, we can handle this by assigning an object name to it. For instance, give Tripitaka an object name "t", so that the image source of Tripitaka’s image can be modified.

Note: For more details about objects, please refer to the "Knowledge Base".

There are a total of 4 images related to Tripitaka walking, so we need four blocks to show them.

Then place the command blocks in order. To make Tripitaka move at an appropriate speed continuously, we can add a wait 0.2 seconds block between each walking posture and put them in a forever command.

Note: The wait seconds and forever blocks can be found under the "Control" category. For more information on the forever block, please refer to the "Knowledge Base".

(2) Monkey King mounting the clouds

The effect of Monkey King mounting the clouds is similar to Tripitaka’s walking, except that Monkey King not only has changes in movement but also needs to move upwards, which requires changing the y-coordinate.

To do this, we need to set the object name of Monkey King's images to "m" and use the block The number parameter of the update object name is to modify the coordinates. You can find the command with the keyword "number parameter" under the "UNIHIKER" category. Drag it out and make some changes.

To make Monkey King fly upwards slower, you can change the position of Monkey King's images multiple times. The complete reference code is shown below:

2. Run the Program

Check the UNIHIKER connectivity, click Run, and observe the UNIHIKER screen. You can see that Monkey King flies up and Tripitaka walks in place.

3. Have a Try

(1) Now Monkey King can fly upward, but his flying motion is still monotonous. Please use the images of Monkey King in the "Lesson 3 > Image Resources" folder to make him ascend on clouds.

(2) Currently, only Tripitaka and Monkey King are on the stage. Please add Piggy and Sandy to the stage and make them walk with Tripitaka.

Task 3: Make the characters appear one by one using buttons

1. Write a Program

In the last task, the four characters appeared on the stage after running the code. Now we are going to manually control the appearance of the characters using the onboard A/B buttons of the UNIHIKER. Here, we’ll first move the characters out of the UNIHIKER screen, and then control them to move to the appropriate position using the A/B buttons.

Taking Piggy as an example, we just need to change the x-coordinate of his current position to move him out of the UNIHIKER screen.

Next, let's learn how to operate the buttons. The button-related command is located in the "Mouse and keyboard event" under the "UNIHIKER" category. Drag out the When the button A is pressed command.

Note: The UNIHIKER board has two buttons located on the right-hand side, with buttons A at the top and B at the bottom. For more information about the buttons on UNIHIKER, please refer to the "Knowledge Base".

Then when button A is pressed, the x-coordinate of the Pigsy image will be updated to the appropriate value.

Finally, complete your code by adding corresponding lines for Tripitaka, Monkey King, Pigsy, and Sandy using what you learned from the previous lesson. Since some lines are too long to be displayed in one line, they need to be displayed in two lines. You can use The number parameter of the update object name is block to set the width of the text, as shown below.

The complete sample codes are shown below.

2. Run the Program

Click Run, and then the lines for Tripitaka and Money King appear above their heads. Press button A on the UNIHIKER, then the character Pigsy and his corresponding lines will appear.

3. Have a Try

You have now known how to operate buttons. Try controlling Sandy and his corresponding lines to appear using button B on the UNIHIKER.

Knowledge Base

1. Loop Structure

The loop structure is a programming structure used to repeatedly execute a certain function in the program. It can usually be described as the following execution process:

In this lesson, to make Tripitaka, Pigsy, and Sandy keep walking on the screen, we used the forever command, which means some operations will be repeatedly executed. The forever command is the simplest form of loop structure and is also known as an "infinite loop". It will run the code indefinitely without stopping. In addition, there are other loop commands such as the while loop and for loop which will be introduced in detail in future lessons.

2. Objects in the Program

(1) Get to know objects in the program

In programming, an “object” is a concrete entity that can be manipulated by a program, such as the images and lines of Monkey King in this stage play.

With an object named properly, its position, color, text content, and other properties can be modified. To do so, you need to use commands that contain the keyword "update object" after establishing the objects. For example, to make the text object "t" show the text "Hello", you need two commands:

We have now learned about four types of objects: text, imitation digital font, rectangle, and image. It should be noted that the modifiable properties differ slightly for each object, and you can refer to the table below to find the modifiable properties for each object.

Note: For more detailed property information, please refer to the "Basic Controls" page on the UNIHIKER official website (https://www.unihiker.com/wiki/ ).

(2) Object Naming Conventions

To operate objects easily, we need to name them according to the naming conventions below:

a) Object names are generally composed of numbers, letters, and underscores.

b) Object names cannot start with a number.

c) Object names cannot include words that already have a special meaning in Python, such as True, False, def, if, elif, else, import, etc.

d) It is recommended to keep object names short and meaningful and avoid using Chinese characters.

3. Buttons on the UNIHIKER

The UNIHIKER board has three buttons: button A & B on the right-hand side and Home button on the left.

The button-related commands are in the "Mouse and keyboard event" under the "UNIHIKER" category. And when you disconnect the UNIHIKER and do a test in the pop-up window that appears after running Python code, the A/B buttons correspond to the A and B keys on the keyboard. When using them, remember to switch to the English input method.

The Home button cannot be controlled by commands, but if the UNIHIKER is running code, long-pressing the Home button will end the code running and return to the UNIHIKER startup screen.

In addition, the Home button is often used to operate the main menu. Long-press to enter the main menu, and short-press to confirm or enter an option. At this time, the A/B buttons can be used to move the cursor up and down respectively.

Note: The UNIHIKER has a Home menu. For detailed information about the Home menu, please visit the "UNIHIKER Home Menu" page on the UNIHIKER official website .

4. Command Learning

In this project, we mainly use the commands for image display, updating object numeric parameters, and A/B button operations. Let’s get to know them in detail.

Challenge

You have learned how to display images, switch images, and operate buttons. Now you can use the images in the "Lesson 3 > Challenge Image Resources" folder and try making a small case to mimic the facial expressions when the UNIHIKER is disturbed while taking a nap.