Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click...

25
Introduction to Alice Computer Science for High School (CS4HS)

Transcript of Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click...

Page 1: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

Introduction to Alice

Computer Science for High School (CS4HS)

Page 2: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

Contents

1 Introduction 2

2 Installation 3

2.1 Basic Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Advanced Installation . . . . . . . . . . . . . . . . . . . . . . . . 3

3 Getting Started 4

3.1 Making the alien see the robot . . . . . . . . . . . . . . . . . . . 73.2 Being chased away . . . . . . . . . . . . . . . . . . . . . . . . . . 7

4 Adding Props and Camera Markers 9

5 Custom Procedures 14

5.1 Creating the ‘step’ procedure . . . . . . . . . . . . . . . . . . . . 145.2 Creating the ‘walk’ procedure . . . . . . . . . . . . . . . . . . . . 18

6 Transitioning to Java 20

6.1 Viewing the Code . . . . . . . . . . . . . . . . . . . . . . . . . . . 206.2 Using NetBeans . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

7 Additional Activities 23

8 Resources 24

8.1 Alice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248.2 Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

1

Page 3: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

1 Introduction

Alice is a graphical programming environment that teaches programming andproblem solving through the creation of 3D animations. It provides an intuitiveinterface to create scenes, position camera points of view and then animatethe charaters and props. The movement is programmed via a drag and dropinterface that teaches the basics of Object Oriented Programming (OOP).

The programming done in Alice directly translates into Java code that can,optionally, be seen side-by-side with the Alice programming. This Java code canalso be imported into popular programs, such as the NetBeans IDE, allowing formore advanced programs to be written and for a transition to other applicationsof Java.

Alice can easily be scaled from very simple animations to more complex an-imations and even Game Maker-style computer games. Although not coveredin this workbook, the event listeners and user input procedures allow the ani-mation to be controlled by the user and conditional logic can be used to make3D games.

2

Page 4: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

2 Installation

Depending on your intended usage of Alice, there are two ways you can installit. If you want to use Alice only, the Basic Installation below is sufficient,however if you wish to transition from Alice to Java code, a different installationprocedure must be followed. If you start with the basic install and then chooseto transition to Java programming, simply follow the second install procedureand the necessary components will be added on top of the existing installation.

2.1 Basic Installation

If you intend to use only Alice, the following is all that is necessary:

1. If not already installed, download the Java Development Kit (JDK) fromhttp://www.oracle.com/technetwork/java/javase/downloads/index.html by clicking on ‘Download Java Platform (JDK)’ and run the installer.

2. Download Alice 3.1 from http://www.alice.org/index.php?page=downloads/download_alice3.1 by clicking on the ‘Download Alice for...’ relevant toyour operating system (Warning: the file is ~1GB) and follow the installerprompts.

2.2 Advanced Installation

If you want to transition from Alice to Java programming, the installation belowis required.

1. If not already installed, download NetBeans and the Java DevelopmentKit (JDK) from http://www.oracle.com/technetwork/java/javase/downloads/index.html by clicking on ‘Download NetBeans with JDK8’ and run the installer (Warning: the file is ~300MB).

2. Download Alice 3.1 from http://www.alice.org/index.php?page=downloads/download_alice3.1 by clicking on the ‘Download Alice for...’ relevant toyour operating system (Warning: the file is ~1GB) and follow the installerprompts.

3. Download the ‘NetBeans Plugin v3.2 for Java 8’ from the Alice downloadwebpage above.

4. Open NetBeans, select ‘Tools > Plugins’ and navigate to the ‘Downloaded’tab.

5. Select ‘Add Plugins’ and select the ‘Alice3ProjectWizard3.2.nbm’ file down-loaded earlier.

6. Click ‘Install’ and follow the installer prompts. If the installer warns ofan unsigned plugin, click ‘Continue’. Close the Plugin window and quitNetBeans.

3

Page 5: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

3 Getting Started

To start, we’ll create a basic project that demonstrates the features of Alice andexplains the interface. It will show how to create a scene and make charactersmove.

The ‘story’ is that of an alien (the ‘alien’ object) on the moon who is startledby the alien-like robot (the ‘alienRobot’ object) and runs away from it.

1. Open ‘Alice 3’ and wait until the ‘Select Project’ screen appears (on thefirst run, it may take a few moments).

Templates provide a basic scene pre-made. They contain a ‘ground’(e.g. the moon surface) and an ‘atmosphere’ colour (e.g. black). Bothof these options can be changed later in the scene designer.

2. Select the ‘MOON’ template and click ‘OK’. A new window will appear,like the one in Figure 1, showing the code view for your animation.

Figure 1: The code view of Alice 3

4

Page 6: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

3. Now, to start laying out your scene, click the view switcher button (‘SetupScene’) to switch to the scene view.

Figure 2: The scene view of Alice 3

4. In the library palette, select ‘Biped classes’ and click on the ‘new Alien()’icon, then press OK on the dialog that will open. This will place an aliencharacter at the center of your scene with the name ‘alien’.

5. Now click on the arrow next to the ‘all classes’ button to return to theopening menu.

Figure 3: Click to return to the full library palette

6. From the library, choose ‘Quadraped classes’ and then click on ‘new Alien-Robot()’. In the dialog that appears, select ‘OK’ to use the default name(‘alienRobot’) and configuration.

5

Page 7: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

7. With the ‘alienRobot’ character selected, change its x-position to 5.0 andthen press ENTER (if the text goes gray, the change has not been applied- reselect the field and press ENTER). This will move the character to theleft of the camera.

Figure 4: The properties of a character; note the change in the positioning

Perhaps counterintuitively, the positioning is from the character’s per-spective, rather than the camera’s position. Therefore, a positive shiftin the x-axis will move an object left and a negative shift will moveit right. This also applies when talking about turning the character -the ‘left’ and ‘right’ are relative to the character, not the camera.

8. Switch back to the code view by selecting the view switching button (‘EditCode’).

Figure 5: The ‘Object Selector’ drop down, with ‘this.camera’ selected

9. From the ‘Object Selector’ drop down, select ‘this.camera’ and drag a‘moveAndOrientToAGoodVantagePointOf’ procedure to the code area in-side the ‘do in this order’ block. In the menu that appears, select the‘this.alien’ object to target the camera on.

6

Page 8: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

Figure 6: The ‘moveAndOrientToAGoodVantagePointOf’ procedure

3.1 Making the alien see the robot

10. From the ‘Object Selector’ drop down, select ‘this.alien’ and drag a ‘turnTo-Face’ procedure to the code area underneath the ‘moveAndOrientToA-GoodVantagePointOf’. In the menu that appears, select the ‘this.alienRobot’object to turn towards.

11. Add a ‘think’ procedure for ‘this.alien’ to the code area and select ‘CustomTextString’ in the pop-up menu. In the textbox, enter ‘Oh no...’ and press‘OK’. Click on ‘add detail’ and set the duration to 0.25 seconds.

12. Add a ‘delay’ procedure for ‘this.alien’ to the code area and set the dura-tion to 0.25 seconds.

13. Add a ‘turn’ procedure for ‘this.alien’ to the code area and set the directionto ‘LEFT’ and amount to 0.5 rotations.

Figure 7: The code so far

At this stage, the code should look like that in Figure 7. Rememberto save your work regularly (File > Save). You can also use the ‘Run’button to see what the animation is doing already.

3.2 Being chased away

14. From the statement library on the bottom of the screen, drag a ‘do to-gether’ block into the code area underneath the ‘turn’ procedure.

7

Page 9: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

Up to this point, all of the procedures have been inside a ‘do in order’block (as the block is there by default in new projects). Inside thisblock, the procedures run sequentially.The ‘do together’ block will run each statement in parallel with thenext. This means the actions will happen at the same time, howeverit will wait until the last statement is finished before continuing.If two procedures conflict with each other (e.g. two ‘move’ procedures

on the same object), then unexpected behaviour may occur, including

only one procedure running or neither running at all.

15. With the ‘this.alien’ object selected, drag a ‘move’ procedure into the ‘dotogether’ block. Set the direction to forward and the amount to ‘CustomDecimalNumber’. In the pop-up window, enter ‘7.0’ and press ‘OK’

16. In the object selector dropdown, change to ‘this.alienRobot’ and drag a‘turnToFace’ procedure into the ‘do together’ and set the target to be‘this.alien’. Set the duration to 0.25 by clicking the ‘add detail’ buttonand selecting duration.

17. With the ‘this.alienRobot’ object selected, drag a ‘moveToward’ procedureinto the ‘do together’ block and set the target to be ‘this.alien’. Set theduration to ‘Custom DecimalNumber’ and in the pop-up window, enter‘11.0’ and press ‘OK’.

Figure 8: The code with the robot chasing the alien

18. Now save the project and press ‘Run’ to see the animation so far.

8

Page 10: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

4 Adding Props and Camera Markers

To make the scene more realistic, a building will be added as a background propthat the charaters chase around.To make the robot chasing the alien around theright side of the building visible, two different camera angles will be required.

1. Click on the view switcher button (‘Setup Scene’).

2. In the library palette, select ‘Prop classes’. This category contains a se-lection of inanimate objects that can be used as scenery. They also havethe same standard procedures as the character classes - ‘turn’, ‘move’, and‘roll’ are all available.

3. Select the ‘new MarsOutpostBunker()’ and drag it into the scene, placingit behind the alien and the alienRobot objects. In the dialog window thatpops up, click ‘OK’ to select the default object name of ‘marsOutpost-Bunker’.

Figure 9: Controlling the camera - (a) repositions the camera, (b) oreintates(pans) the camera, (c) rotates the camera on the X-axis

4. Use the three sets of buttons to adjust the view of the camera so that the‘alienRobot’ and ‘alien’ objects are centered in the view and the top ofthe bunker is visible.

Figure 10: An example camera position for the front perspective

5. Once all three objects are in the frame, go to the properties panel on theright and expand the ‘Camera Markers’ section.

9

Page 11: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

6. Click ‘Add Camera Marker...’. In the window that pops up, change thename to ‘bunkerFront’ and click ‘OK’.

A camera marker saves the current position and orientation of thecamera so that it can be accessed programmatically from within thecode. They can also be utilised from within the scene editor by se-lecting the marker in the ‘Camera Markers’ section of the propertiespanel and pressing the button below. This will reposition the camerato the saved position.

After setting a camera marker, when moving around the scene, afloating camera icon will be visible indicating the saved position ofthe camera.

7. Use the camera control buttons to reposition the camera and orientate ittowards the right side of the bunker, as shown in Figure 11. Dragging thecursor around the scene will also reposition the camera.

Figure 11: An example camera position for the right-side perspective

8. When the camera is positioned and oriented, click the ‘Add Camera Marker...’button in the properties panel. In the window, change the name to‘bunkerRight’ and click ‘OK’.

10

Page 12: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

9. Switch back to the code editor.

10. Right-click the ‘moveAndOrientToAGoodVantagePointOf’ block in thecode area and select ‘Delete’.

11. In the object selector dropdown, select ‘this.camera’.

12. Drag a ‘moveAndOrientTo’ procedure to the top of the code area abovethe ‘turnToFace’ proecdure and select ‘this.bunkerFront’ as the target.This will make the scene start with the camera focussing on the front ofthe bunker, where the characters are initially.

13. From the statements palette on the bottom of the screen, drag a ‘do to-gether’ block to the end of the code (below the previous ‘do together’block).

14. Drag a ‘moveAndOrientTo’ procedure inside the new ‘do together’ blockand select ‘this.bunkerRight’ as the target.

Figure 12: The code with two different camera angles utilised

15. Press ‘Run’ to preview the scene and see the camera transitions.

16. In the object selector dropdown, change to ‘this.alien’.

17. Add a ‘turn’ block to the ‘do together’ block at the bottom of the codearea and set the direction to ‘LEFT’ and amount to 0.25. Click on ‘adddetail’ and set the duration to 0.25 seconds.

18. From the statements palette on the bottom of the screen, drag another ‘dotogether’ block to the end of the code (below the previous ‘do together’block).

11

Page 13: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

19. With ‘this.alien’ selected, add a ‘move’ block to the new ‘do together’ blockat the bottom of the code area and set the direction to ‘FORWARD’ andamount to 1.0. Click on ‘add detail’ and set the duration to 0.5 seconds.

20. In the object selector dropdown, select ‘this.alienRobot’ and drag a ‘turn’block into the ‘do together’ block. Set the direction to ‘LEFT’ and amountto 0.25 rotations. Click ‘add detail’ and set the duration to 0.5 seconds.

21. With ‘this.alienRobot’ selected, drag a ‘move’ block into the ‘do together’block. Set the direction to ‘RIGHT’ and amount to 1. Click ‘add detail’and set the duration to 0.5 seconds. This block, combined with the ‘turn’block above, will make the robot arc towards the alien as it turns thecorner.

22. From the statements palette on the bottom of the screen, drag another‘do together’ block to the end of the code (below the three previous ‘dotogether’ blocks).

23. With ‘this.alien’ selected, add a ‘move’ block to the new ‘do together’ blockat the bottom of the code area and set the direction to ‘FORWARD’ andamount to ‘Custom DecimalNumber’. In the popup input, enter 22.0.Click on ‘add detail’ and set the duration to 2 seconds.

24. In the object selector dropdown, select ‘this.alienRobot’ and drag a ‘move’block into the ‘do together’ block. Set the direction to ‘FORWARD’ andamount to ‘Custom DecimalNumber’. In the popup input, enter 22.0.Click on ‘add detail’ and set the duration to 2 seconds.

25. Now press ‘Run’ to preview the scene and see the alien and robot chasealong the right side of the building.

12

Page 14: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

Figure 13: The code to animate the chase around two sides of the building

13

Page 15: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

5 Custom Procedures

To make the scene look more realistic, the movement of the alien needs to berefined to make it look like it is walking, not gliding, along the surface. To dothis, two new procedures are needed: one to animate the character stepping,and one to repeat this procedure for as many steps as are needed.

5.1 Creating the ‘step’ procedure

1. In the code editor, click the hexagonal class selector button in the top left.In the drop down that appears, select ‘Biped’ > ‘Add Biped Procedure’and enter the name as ‘step’.

Figure 14: This button opens a menu of all classes, procedures and functions

2. Click the ‘Add Parameter...’ at the top and in the pop-up window, setthe value type to ‘DecimalNumber’ and the name to ‘quarterDuration’,then press ‘OK’. This will be the duration for each statement and willeventually be equal to one quarter of the total duration of the procedure.

3. From the statements library, drag a ‘do together’ block to the code area.

Figure 15: Click the left-side button on the block to change the ‘calling object’

4. From the procedures palette, add a ‘turn’ block into the ‘do together’block. Set the direction to ‘RIGHT’ and the amount to ‘Custom Decimal-Number’. In the pop-up, enter 0.125. Click on the ‘this’ button on the leftside of the block and select ‘this’ > ‘this.getRightShoulder’ from the drop-down menu that appears. This will change which object calls the ‘turn’method. Click ‘add detail’ and set the duration to the ‘quarterDuration’parameter (the bottom option in the dropdown).

Each of the characters is made of a number of a ‘joints’ that are actu-ally separate objects that form a larger object (the character itself).

14

Page 16: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

These objects can be accessed and controlled through a number offunctions such as ‘this.getHead’. Although these methods are visi-ble from the functions tab of the methods palette, the easiest way toutilise them in Alice is to change the object that a method (such as‘turn’) is to be called on (the ‘calling object’) after the block has beenplaced in the code area.

5. Add another ‘turn’ block to the ‘do together’ block and set the direction to‘RIGHT’ and the amount to 0.125. Change the object calling the methodto ‘this.getLeftShoulder’. Click ‘add detail’ and set the duration to the‘quarterDuration’ parameter.

6. Add another ‘turn’ block to the ‘do together’ block and set the directionto ‘BACKWARD’ and the amount to ‘Custom DecimalNumber’. In thepop-up window, set the value to 0.08 and then change the object callingthe method to ‘this.getRightHip’. Click ‘add detail’ and set the durationto the ‘quarterDuration’ parameter.

7. Add another ‘turn’ block to the ‘do together’ block and set the directionto ‘FORWARD’ and the amount to ‘Custom DecimalNumber’. In thepop-up window, set the value to 0.08 and then change the object callingthe method to ‘this.getLeftHip’. Click ‘add detail’ and set the duration tothe ‘quarterDuration’ parameter.

8. Add another ‘turn’ block to the ‘do together’ block and set the directionto ‘FORWARD’ and the amount to ‘Custom DecimalNumber’. In thepop-up window, set the value to 0.08 and then change the object callingthe method to ‘this.getRightKnee’. Click ‘add detail’ and set the durationto the ‘quarterDuration’ parameter.

9. Add a ‘move’ block to the ‘do together’ block and set the direction to‘FORWARD’ and the amount to 0.5 (keep the calling object as ‘this’).Click ‘add detail’ and set the duration to the ‘quarterDuration’ parameter.

10. From the statements library, add another ‘do together’ block after theexisting one in the code area.

11. Inside the new ‘do together’ block, add a ‘move’ block with the directionset to ‘FORWARD’ and the amount to 0.5. Click ‘add detail’ and set theduration to the ‘quarterDuration’ paramter.

12. From the procedures palette, add a ‘straightenOutJoints’ block to thesecond ‘do together’ block. Click ‘add detail’ and set the duration to‘quarterDuration’.

13. From the statements library, add another ‘do together’ block after theexisting ones in the code area.

15

Page 17: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

Figure 16: The code to animate the right leg when taking a step

14. Add a ‘turn’ block to the bottom ‘do together’ block and set the directionto ‘LEFT’ and the amount to 0.125. Change the object calling the methodto ‘this.getLeftShoulder’. Click ‘add detail’ and set the duration to the‘quarterDuration’ parameter.

15. Add another ‘turn’ block to the bottom ‘do together’ block and set the di-rection to ‘LEFT’ and the amount to 0.125. Change the object calling themethod to ‘this.getLeftShoulder’. Click ‘add detail’ and set the durationto the ‘quarterDuration’ parameter.

16. Add another ‘turn’ block to the bottom ‘do together’ block and set thedirection to ‘FORWARD’ and the amount to ‘Custom DecimalNumber’.In the pop-up window, set the value to 0.08 and then change the objectcalling the method to ‘this.getRightHip’. Click ‘add detail’ and set theduration to the ‘quarterDuration’ parameter.

17. Add another ‘turn’ block to the bottom ‘do together’ block and set thedirection to ‘BACKWARD’ and the amount to ‘Custom DecimalNumber’.In the pop-up window, set the value to 0.08 and then change the objectcalling the method to ‘this.getLeftHip’. Click ‘add detail’ and set theduration to the ‘quarterDuration’ parameter.

18. Add another ‘turn’ block to the bottom ‘do together’ block and set thedirection to ‘FORWARD’ and the amount to ‘Custom DecimalNumber’.In the pop-up window, set the value to 0.08 and then change the objectcalling the method to ‘this.getLeftKnee’. Click ‘add detail’ and set theduration to the ‘quarterDuration’ parameter.

16

Page 18: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

19. Add a ‘move’ block to the bottom ‘do together’ block and set the directionto ‘FORWARD’ and the amount to 0.5 (keep the calling object as ‘this’).Click ‘add detail’ and set the duration to the ‘quarterDuration’ parameter.

20. Right-click on the second ‘do together’ block (containing only 2 blocks)and select ‘Copy to Clipboard’. (Note: The normal keyboard commands

for copying and pasting are not available.)

21. Click and drag from the clipboard in the top right corner to paste theblock at the bottom of the existing code. The final code for the ‘step’procedure should look like Figure 17.

Figure 17: The complete code for the ‘step’ procedure

17

Page 19: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

5.2 Creating the ‘walk’ procedure

1. Click the hexagonal class selector button and select ‘Biped’ > ‘Add BipedProcedure...’ and name the procedure ‘walk’.

2. With the ‘walk’ tab selected, click ‘Add Parameter...’ and in the pop-upwindow, set the value type to ‘WholeNumber’ and the name to ‘steps’,then press ‘OK’. This will be the number of steps to take.

3. Click ‘Add Parameter...’ again and in the pop-up window, set the valuetype to ‘DecimalNumber’ and the name to ‘stepDuration’, then press ‘OK’.This will be the duration per step.

4. From the statements library, drag a ‘count’ block into the code area andset the number to count up to ‘steps’.

5. From the procedures palette, place a ‘step’ statement inside the ‘count’block. Set the duration to the ‘stepDuration’ parameter (the bottomelement of the dropdown menu).

Figure 18: Divide the ‘duration’ by four to get the ‘stepDuration’

6. Click on the duration parameter of the ‘step’ statement and select ‘Math’> ‘stepDuration / ???’ > ‘Custom DecimalNumber’. In the pop-up win-dow, enter 4.0. This is required because the duration used in the ‘step’block is one-fourth of the total actual duration of the ‘step’ block due tothe four ‘do together’ blocks in the ‘step’ procedure.

Figure 19: The complete code for the ‘walk’ procedure’

7. In the procedure tabs, select ‘myFirstMethod’.

8. Right-click on the this.alien ‘move’ block inside the first ‘do together’ blockand delete it.

18

Page 20: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

9. With ‘this.alien’ selected in the object selector dropdown, drag a walkblock from the procedure palette into the first ‘do together block’ wherethe ‘move’ block was. Set the number of steps to 3 and the duration to‘Custom DecimalNumber’. In the pop-up window, enter 0.14.

10. Right-click on the this.alien ‘move’ block inside the last ‘do together’ blockand delete it.

11. With ‘this.alien’ selected in the object selector dropdown, drag a walkblock from the procedure palette into the last ‘do together block’ wherethe ‘move’ block was. Set the number of steps to 11 and the duration to‘Custom DecimalNumber’. In the pop-up window, enter 0.1.

Figure 20: The final code for the ‘myFirstMethod’ procedure

12. Run the scene and the alien should now be running away from the robotaround the building.

19

Page 21: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

6 Transitioning to Java

Alice is deeply integrated with the Java ecosystem - not only is Alice writtenin Java, it also utilises it to generate the animations. When the animation isrun or exported, the Alice ‘code’ is translated directly into Java code and thencompiled. As a result, it is easy to view the generated code and then import itinto a conventional Java Integrated Development Environment (IDE), such asthe NetBeans IDE.

Note: the following instructions require NetBeans and the full JDK to be

installed, as per the Advanced Installation instructions.

6.1 Viewing the Code

Figure 21: The side-by-side view of the Alice and Java code

With the code editing view open, go to ‘Window’ > ‘Preferences’ in the topmenu bar and enable ‘Java Code on the Side’. This will provide a side-by-sideview of the Alice code and Java code. A good example is the ‘myFirstMethod’procedure which demonstrates the similarities between the two languages. Fora more comprehensive example of the outputted Java code, click on the ‘Scene’tab at the top of the window. This will open the complete class, including theauto-generated code, and shows how the entire scene is setup. Unfortunately itis not possible to edit the Java code from within Alice, however changes in theAlice code are reflected in the Java code in real time.

Although the Alice code is very similar to the Java code, there are a fewsyntactic differences. By default, the Alice environment hides the brackets,

20

Page 22: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

semicolons and commas to make the code easier to read. There is a preferenceunder ‘Window’ > ‘Preferences’ > ‘Programming Language’ which re-enablesthese characters by switching to ‘Java’. This makes the Alice code look nearlyidentical to the Java code, while still providing a drag-and-drop interface toprogram in.

6.2 Using NetBeans

A project is imported from Alice into NetBeans by copying it. Changes to theJava code are not reflected in Alice and any changes in Alice are not reflected inthe Java code either. There is no way to import a Java program back into Aliceeither. As such, it is recommended that the scene is designed completely andany basic movements are animated in Alice before importing it into NetBeans.

1. Save the project and exit Alice.

2. Open the NetBeans IDE (it may take a few moments) and select ‘File’ >‘New Project’ from the main menu bar.

Figure 22: Create a new project - select ‘Java Project from Existing AliceProject’

3. Select ‘Java’ as the category and ‘Java Project from Existing Alice Project’as the project type, then click ‘Next >’.

4. Next to ‘Alice Project Location’, click ‘Browse’ and find the Alice Projectfile (e.g. Example1.a3p). The ‘Java Project Name’ and other fields shouldautomatically complete, then press ‘Finish’.

5. The NetBeans code editor should appear, with a list of the files on theleft-hand side.

6. From the main menu bar, go to ‘Window’ > ‘IDE Tools’ > ‘Palette’. Thiswill open the Alice palette on the right side of the window. This palettecontains the control statements, and event listeners, that were availablein Alice. These act as templates and can be dragged into the code andmodified.

21

Page 23: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

Figure 23: The NetBeans IDE with the run button circled

7. Press the ‘Run’ button at the top of the window and after a few moments, anew window should appear showing the animation. The animation shouldbe identical to the earlier animation in Alice.

8. Open the Scene.java file by double-clicking on it and scroll to the ‘my-FIrstMethod’ procedure.

Listing 1: The beginning of the ‘myFirstMethod()’ procedure in Scene.javapublic void myFirstMethod ( ) {

this . camera . moveAndOrientTo ( this . bunkerFront ) ;this . a l i e n . turnToFace ( this . a l i enRobot ) ;. . .

9. Change the this.camera.moveAndOrientTo(this.bunkerFront); tothis.camera.moveAndOrientTo(this.bunkerFront, MoveAndOrientTo.duration(0.0));This will make the scene start immediately at ‘bunkerFront’, instead ofhaving the camera swivel around slightly.

10. Save the file (File > Save) ress the ‘Run’ button to see the change.

Try changing other paramters and adding or changing the procedures called,or completing some of the activities below. A quick way to see the correct syntaxand method parameters is to make a change in Alice with the ‘Java Code onthe Side’ preference enabled, then copy the change to NetBeans.

22

Page 24: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

7 Additional Activities

All of the following can be done either in Alice or in NetBeans.

• Change the scene to occur on Mars, instead of the moon.

• Make the alien and robot run towards the ‘bunkerRight’ camera insteadof around the right-side of the building. If they run past the camera, itwill provide a cleaner ending to animation.

• Alternatively, make the characters run around the whole building contin-uously (hint: use a ‘while’ block).

• At the start of the scene, make the alien slowly back away when it seesthe robot and then make it run away when the robot starts moving.

• Research the event listeners provided in Alice and make the scene onlystart when the user presses a key (hint: see the ‘Resources’ page).

• Using the event listeners, make the speed of the alien increase dependingon how many times the ‘f’ key is pressed.

• Create a new scene set in a coffee shop that animates a typical day.

Using the event listeners and user input commands, it is possible to useAlice to create small programs and simple games, as well as animations. Bydesigning it in Alice and then moving to Java, the scene design, animation andrendering are handled while making it easier to implement maths, variables andmore advanced logic via the Java code.

23

Page 25: Introduction to Alice › filething › get › 13470 › introto... · 2015-02-04 · 5. Now click on the arrow next to the ‘all classes’ button to return to the opening menu.

8 Resources

8.1 Alice

http://www.alice.org/3.1/materials_guide.phpA comprehensive how-to guide by the creaters of Alice (includes an Alice toJava guide and a guide on event listeners)

http://www.alice.org/3.1/materials_introduction.phpLectures, notes and resources from Carnegie Mellon for using Alice

http://www.cs.duke.edu/csed/alice09/tutorialsAlice3.phpVideo tutorials and resources from Duke University that explain each part ofAlice very well

8.2 Java

http://www.ibm.com/developerworks/java/tutorials/j-introtojava1/A very comprehensive set of tutorials from IBM on Java

http://web.stanford.edu/class/cs106a/A Stanford course (available on iTunes) that is the basis for most Java courses

http://www.oracle.com/technetwork/topics/newtojava/overview/index.htmlThe official Oracle introduction to Java (and official documentation)

http://www.lejos.orgA popular platform for programming ‘LEGO Mindstorms’ robots in Java

Acknowledgements

The University of Queensland would like to thank Tristan Roberts for prepar-ing this workbook, and Margot Phillips in New Zeeland who introduced us toProgramming Challenge for Girls (PC4G) which the tutorial content is basedon.

24