Art 486: Introduction to Interactive Media.

Transcription

1 Art 486: Introduction to Interactive Media

2 Schedule Chapter 3! Comments and stuff

3 3: Puzzles Attributes of Good Puzzle Design Intuitive controls Readily-Identifiable patterns Allows skill to improve performance Art-direction continuity If built into a larger game, comes with meaningful consequences

4 Puzzle Types Riddles: text-based, turning on word games Used to be common; easy interface Annoying! Single-answer, little skill involved? Lateral Thinking Very similar to riddles

5 More common puzzle types Spatial Reasoning Tetris, Sokoban Pattern Recognition Encoding/decoding, foreshadowing, Logic/ Math Ugh: 4-color maps! Math includes counting and topology, can easily turn into riddles. Exploration/ tactical reasoning spatial arrangement of obstacles that s 90% of level design! Item Use

6 Hints on adding puzzles to games Control clues; use clues as incentives and to control difficulty Allow multiple solutions Adding a timer Puzzles are doors: don t make them impassable. Test a lot.

7 Takeaway I do not think that puzzles are wellunderstood Strong links to emergent game play Particularly, I think that riddles could be explored Riddle generation? Riddle typology? You d need a collection of 100s, and an English major and a lot of math. A card game that makes riddles?

8 Links to level design? All of what you do in an RPG or FPS could be seen as a puzzle What order to kill things, what path to follow... Puzzle attributes of games lead to emergent strategies In Tag, touchbacks solve the game Cheap wins solve the game s puzzle in ways that are not fun Ultimately, all skill games are solved with skill? Skill is a solution?

9 Challenges Make a bomb-defusing game That is not just randomly guessing Maze Game

10 Neal s Alternate Classification Riddles: questions that cannot be answered by straightforward analysis What to have for lunch? vs What has 3 legs in the morning,...? Puzzles: questions that can be solved straightforwardly, but requiring more steps than your brain can do trivially. Chess problems, mazes, FPS strategy. Locks: questions solved with controlled information.

11 Labyrinth!

12 comments the way you put text in your program and tell the compiler to ignore it very, very important to embed notes to yourself remind yourself what this or that bit of code was doing // causes the computer to ignore the rest of the line /* causes the computer to ignore everything until it encounters a */

13 Indentation Most languages don t use indentation as part of the language. White Space = spaces, tabs, and newlines Obfuscation = deliberate hiding of information

14 Compare!

15 Most Programming is Revision Maintenance, they call it. You ll someday have 1000 s of lines of code that is 8 years old. It sorta does what you were wanting to do. Like remembering phone numbers. Comments save time.

16 Indentation You will let it slide; historical fact. You will then misplace a } or a ) Those errors are the very, very worst! The compiler will do its best, but it will run out of } s far, far from where the error is. It will point at lines far below the error. So very inscrutable I will find it, and then say something gentle and infuriating about indentation.

17 Let s make particles! Let s make a bouncing ball. ball.html is on the website kind of where we stopped last time

18 But.. it just jitters. : ( Let s make it move one way or the other. Add a velocity to the ball: vx Instead of adding random, we ll add vx var spot, vx; // line 10 vx = 2; // line 17 spot = spot+vx; // line 34

19 Whups. Needs to bounce! After you change the position, check to see whether the mark is still on the screen. if (spot>640) { vx = -vx; } // line 37

20 Oh, bounce the other way, too! if (spot<0) { vx = -vx; } // line 38

21 but! it s not doing anything vertical! need new variables: spoty, vy Lots more code: use spoty to draw; check bounds, add... Let s not do it in class. var spot, spoty, vx, vy; // line 10 spoty = 240; vy=0; // line 18

22 More than one ball! duplicate code: two each of spot, spoty, vx, vy, updates, and bounds checking what if I want 4 balls? ugh. what if I want 400? no. arrays.

23 you could simplifications

24 classes/objects we have been using types int, float, bool these are kinds of object the words type and object are interchangeable in AS3 there are many kinds of object in JS Sprites, Events, Timelines, Animations,

25 relationships between classes, objects, and variables a variable is an object you can have a lot of objects every object belongs to a class the class defines how the object behaves generally, use classes by making objects of that class and then manipulating them You interact with a cat, not the species cat. Your cat gives you cat experiences.

26 that s quite abstract let s work with some objects

27 object.html

28 what did you just do? 2: declared a variable named boxxy of type mysymbol thought it was a class? yes 4: did some array-like thing called the constructor (?) initialized it, got it ready for use 6&7: set boxxy s local variables 8: addchild adds boxxy to the stage s list of things to draw

29 also, you used only AS4, no flash animation anything, to make a symbol appear

30 mysymbol is a class you defined it, somehow, using that dialog box you made a variable, boxxy boxxy is much more complex than an integer

31 a class has member variables boxxy.x = 100; sets the x member variable of boxxy to 100 all objects of type mysymbol will have a x like local variables for functions

32 boxxy is an object mysymbol describes what it is int describes how to do +, -, * boxxy gets a x and a y that are all its own mysymbol declares what makes up boxxy

33 boxxy= new mysymbol(); this line calls the constructor function for the mysymbol class the constructor is a function; you see the () s constructor functions are named after their classes constructor functions get objects of a class ready for use similar to what you do for an array I don t really know what it does doesn t matter

34 boxxy.x = 200.0; an assignment modifies a variable attached to boxxy a member variable boxxy has it because it is a mysymbol every object whose class is mysymbol will have its very own.x

35 addchild(boxxy); you passed an object as a parameter the function takes the object and does something with it tells Flash to draw it x and y tell it where to draw it

36 change x and y! instead of x=100, put x=200 run -> boxxy shows up in a different place

37 animation use the same frame 1 code as before add new code to frame 3

38 other attributes how to find? mysymbol is a subclass of Sprite look up Sprite how would you know that? take a class

39 the stage hierarchy the stage has a list of things to draw actually, a tree called the display list the list is all sprites in Flash, you control that list through the interface in AS3, you can work with the Flash interface, the timeline, etc, or you can do it all with code

40 addchild() takes a sprite tells Flash to draw it, every frame

41 removechild() tells Flash to forget about drawing a sprite

42 child classes? a class that is the child of another reuses the contents of the parent class define the Sprite class to be drawable stuff has an x, a y, a rotation Symbols, Movies, and Buttons all reuse the Sprite class don t worry about the exact mechanism for now

43 let s make an array of mysymbol s var syms: Array(20); for (i=0; i<20; ++i) { syms[i] = new mysymbol(); syms[i].x = i*30; syms[i].y = i*20; addchild(syms[i]); }

44 let s make a particle system on frame 3 for (i=0; i<20; i=i+1) { } syms[i].x += Math.random()*10.0; syms[i].y += Math.random()*10.0;

45 let s make a particle system on frame 1 on frame 3

46 result: jittery things