EXCODE. Code An App From Scratch

Size: px

Start display at page:

Download "EXCODE. Code An App From Scratch"

Tyrone Simpson
6 years ago
Views:

1 3 EXCODE Code An App From Scratch

2 Course Overview Weeks 1-2 Learning Python Weeks 3-5 Creating your game Week 6 Presenting the games

3 Get the course notes exeterentrepreneurs.com/excode-content exeterentrepreneurs.com/excode-content/

4 Recap my_list = [2, 3, 5, 2, 9, 22] indexed_list = my_list[2] if name == "John" or age == 17: print("name is John") my_list = [2,5,3] for x in (my_list): print(x)

5 More practice Any questions on CodeAcademy s Lessons 3, 5 or 8

6 PyGame Pygame is a cross-platform set of Python modules designed for creating games. The modules are designed to be simple, easy to use, and fun a key part of Pygame's ideology.

7 Why PyGame Simple Large community Open Source Suitable to be converted for Android It's Simple Python is often regarded as the best "first programming language" to learn, and has been praised for its easy-to-learn syntax and gradual learning curve. For this reason, many new programmers start by learning Python. Pygame extends Python, adopts Python s philosophy, and aims to be easy to use. Plus, aspiring new game developers with no programming experience can use Pygame, as they can quickly pick up Python first. It Has a Large Community Pygame has been available since 2000 and, since then, a large community has built up around it. It's Open Source The fact that Pygame is open source means that bugs are generally fixed very quickly by the community. It also means that you can extend Pygame to suit your needs and maybe even give back to the community. Suitable to be converted for Android

8 What we are aiming for (run demo)

9 Develop the game in teams Ideally in pairs, in a three or on your own if this isn t possible

10 Install Python Mac: /python macosx10.6.pkg Windows: python/2.7.13/python msi Choose 2.7 version Common issue: no matching architecture error: Check bit version of python: import platform print ( platform.architecture() )

11 Install PyGame Windows pygame.org/download.shtml Mac Open Terminal Type in and press enter: sudo pip install pygame Choose 2.7 version

12 Create a new Project and file Create a folder with appropriate name Open PyCharm, File->New Project->Save in that folder (THIS WINDOW OPTION FINE IF APPEARS) File->New ->Python File->call it main

13 Verify Python print( 2+2 ) Type print( 2+2 ) and run it

14 Verify PyGame installed import pygame To verify that you have PyGame installed properly, type in import pygame at the Python prompt. If this doesn t result in any output, then you re good.

15 Download resources LINK TO RESOURCES FOLDER Unzip it and copy resources folder into project folder

16 # 1 - Import library import pygame from pygame.locals import * Add the actor # 2 - Initialize the game pygame.init() width, height = 640, 480 screen=pygame.display.set_mode((width, height)) # 3 - Load images actor_image = pygame.image.load("resources/images/cannon.png") # 4 - keep looping through while 1: # 5 - clear the screen before drawing it again screen.fill(0) # 6 - draw the screen elements screen.blit(actor_image, (100,100)) # 7 - update the screen pygame.display.flip() # 8 - loop through the events for event in pygame.event.get(): # check if the event is the X button if event.type==pygame.quit: # if it is quit the game pygame.quit() exit(0) 1. Import the PyGame library. This allows you to use functions from the library in your program. 2. Initialise PyGame and set up the display window. 3. Load the image that you will use for the actor. 4. Keep looping over the following indented code. Note: Python uses indenting to identify code blocks. So proper indentation is very important in Python 5. Fill the screen with black before you draw anything. 6. Add the actor image that you loaded to the screen at x=100 and y= Update the screen. 8. Check for any new events and if there is one, and it is a quit command, exit the program.

17 Add the scenery Add at the end of section #3 background_image = pygame.image.load("resources/images/grass.png") castle_image = pygame.image.load("resources/images/castle.png") Add at the start of section #6 for x in range(width/background_image.get_width()+1): for y in range(height/background_image.get_height()+1): screen.blit(background_image,(x*100,y*100)) screen.blit(castle_image,(0,30)) screen.blit(castle_image,(0,135)) screen.blit(castle_image,(0,240)) screen.blit(castle_image,(0,345)) 1. Let s start by adding a background to the game scene. This can be done with a couple more screen.blit() calls. 2. At the end of section #3, after loading the actor image, add the following code. This loads the images and puts them into specific variables. Now they have to be drawn on screen. But if you check the background_image image, you will notice that it won t cover the entire screen area, which is 640 x 480. This means you have to tile the background_image over the screen area to cover it completely. 3. Add the following code to game.py at the beginning of section #6 (before the actor is drawn on screen) As you can see, the for statement loops through x first. Then, within that for loop, it loops through y and draws the background_image at the x and y values generated by the for loops. The next couple of lines just draw the castle_images on the screen.

18 Make the actor rotate import math Add at the end of section #1 actorpos=[150,240] Add at the end of section #2 import math contains maths functions needed to calculate rotation The actorpos variable is where the program draws the actor. Since the game will move the actor to different positions, it s easier to have a variable that contains the actor position and then simply draw the actor at that position.

19 Make the actor rotate screen.blit(actor_image, (100,100)) Change this in section #6 To this # Set actor position and rotation position = pygame.mouse.get_pos() angle = math.atan2(position[1]-(actorpos[1]+32),position[0]-(actorpos[0]+26)) actorrot = pygame.transform.rotate(actor_image, 360-angle*57.29) actorpos1 = (actorpos[0]-actorrot.get_rect().width/2, actorpos[1]-actorrot.get_rect().height/2) screen.blit(actorrot, actorpos1) Let s go through the basic structure of the above code. First you get the mouse and actor positions. Then you feed those into the atan2 function. After that, you convert the angle received from the atan2 function from radians to degrees (multiply radians by approximately or 360/2π). Since the actor will be rotated, its position will change. So now you calculate the new actor position and display the actor on screen. Run the game again. If you move your mouse, the actor rotates too.

20 Make the actor shoot acc=[0,0] bullets=[] Add at the end of section #2 Add at the end of section #3 bullet_image = pygame.image.load( resources/images/ball.png") This step is a bit more complicated because you have to keep track of all the bullets, update them, rotate them, and delete them when they go off-screen. First of all, add the necessary variables to the end of the initialisation section, section #2. The first variable keeps track of the actor s accuracy and the second array tracks all the bullets. The accuracy variable is essentially a list of the number of shots fired and the number of enemies hit. Later, we will be using this information to calculate an accuracy percentage. Next, load the bullet image at the end of section #3.

21 Make the actor shoot Add at the end of section #8 if event.type==pygame.mousebuttondown: position=pygame.mouse.get_pos() acc[1]+=1 bullets.append([math.atan2(position[1]-(actorpos1[1]+32),position[0]- (actorpos1[0]+26)),actorpos1[0]+32,actorpos1[1]+32]) Add at the end of section #6.1 # Draw bullets for bullet in bullets: index=0 velx=math.cos(bullet[0])*10 vely=math.sin(bullet[0])*10 bullet[1]+=velx bullet[2]+=vely if bullet[1]<-64 or bullet[1]>640 or bullet[2]<-64 or bullet[2]>480: bullets.pop(index) index+=1 for projectile in bullets: bullet1 = pygame.transform.rotate(bullet_image, 360-projectile[0]*57.29) screen.blit(bullet1, (projectile[1], projectile[2])) Now when a user clicks the mouse, a bullet needs to fire. Add the following to the end of section #8 as a new event handler. This code checks if the mouse was clicked and if it was, it gets the mouse position and calculates the bullet rotation based on the rotated actor position and the cursor position. This rotation value is stored in the bullets array. Next, you have to actually draw the bullets on screen. Add the following code right after section #6.1. The vely and velx values are calculated using basic trigonometry. 10 is the speed of the bullets. The if statement just checks if the bullet is out of bounds and if it is, it deletes the bullet. The second for statement loops through the bullets and draws them with the correct rotation. Try and run the program. You should have an actor that shoots bullets when you click the mouse.

22 Ask us questions & keep up to date facebook.com/groups/excode2017spring

23 Attendance Please make sure to sign in

24 3 EXCODE Code An App From Scratch

There s already a ton of code written called libraries that we can use by importing. One that we use often is random

There s already a ton of code written called libraries that we can use by importing. One that we use often is random import random print random.randint(2, 22) Random frequently used methods Name Use random.randint(a,