http___programarcadegames.com_index.php_chapter_introduction_to_sprites_lang_tr_3.xml
1.1 2.1 3.1 3.2 4.1 4.2 4.3 5.1 6.1 6.2 6.3 6.4 6.5 7.1 8.1 8.2 8.3 8.4 9.1 9.2 9.3 10.1 10.2 10.3 10.4 11.1 12.1 12.2 12.3 12.4 13.1 13.2 13.3 13.4 14.1 14.2 14.3 14.4 15.1 16.1 16.2 16.3 16.4 17.1 17.2 18.1 19.1 19.2 19.3 19.4 20.1 20.2 20.3 21.1 21.2 21.3 21.4 22.1 23.1 24.1 25.1 25.2 25.3 25.4 25.5 25.6 26.1 26.2 27.1 28.1 29.1 29.2 29.3 30.1 30.2 30.3 31.1 31.2 31.3 31.4 31.5 32.1 33.1 33.2 33.3 33.4 33.5 33.6 33.7 33.8 34.1 34.2 34.3 34.4 34.5 34.6 34.7 35.1 36.1 37.1 38.1 39.1 40.1 41.1 41.2 42.1 43.1 44.1 44.2 44.3 45.1 45.2 46.1 47.1 48.1 48.2 48.3 48.4 48.5 48.6 49.1 50.1 50.2 50.3 50.4 51.1 51.2 51.3 52.1 53.1 54.1 55.1 55.2 56.1 57.1 58.1 59.1 60.1 60.2 60.3 60.4 60.5 60.6 61.1 62.1 63.1 64.1 65.1 67.1 68.1 68.2 69.1 70.1 71.1 72.1 73.1 74.1 75.1 76.1 77.1 78.1 79.1
Program Arcade GamesWith Python And Pygame Chapter 11: Bitmapped Graphics and Sound To move beyond the simplistic shapes offered by drawing circles and rectangles, our programs need the ability to work with bitmapped graphics. Bitmapped graphics can be photos or images created and saved from a drawing program. But graphics aren't enough. Games need sound too! This chapter shows how to put graphics and sound in your game. 11.1 Storing The Program in a Folder The programs we've made so far only involve one file. Now that we are including images and sounds, there are more files that are part of our program. It is easy to get these files mixed up with other programs we are making. The way to keep everything neat and separated out is to put each of these programs into its own folder. Before beginning any project like this, click the “new folder” button and use that new folder as a spot to put all the new files as shown in Figure 11.1. 11.2 Setting a Background Image Need to set a background image for your game? Find an image like Figure 11.2. If you are looking on-line in a web browser, you can usually right-click on an image, and save it onto the computer. Save the image to the folder that we just created for our game. Any bitmap images used in a game should already be sized for how it should appear on the screen. Don't take a 5000x5000 pixel image from a high-resolution camera and then try to load it into a window only 800x600. Use a graphics program (even MS Paint will work) and resize/crop the image before using it in your Python program. Loading an image is a simple process and involves only one line of code. There is a lot going on in that one line of code, so the explanation of the line will be broken into three parts. The first version of the our load command will load a file called saturn_family1.jpg. This file must be located in the same directory that the python program is in, or the computer will not find it: # Image from http://ProgramArcadeGames pygame.image.load("saturn_family1.jpg") Be careful about using copyrighted images. If you publish a game with images that you don't have the rights to, that's illegal. If you are creating your own work that you aren't sharing, then it is ok. If you are doing a class assignment, make sure that you check with the instructor for his or her rules around it. For class assignments, I suggest my students add a comment to the program just before loading the image. List where the image came from as we did in the example above. (Don't list Google as the image source, that's like listing the “library” as your reference source. Find the website the image came from.) That code may load the image, but we have no way to reference that image and display it! We need a variable set equal to what the load() command returns. In the next version of our load command, we create a new variable named background_image. See below for version two: background_image = pygame.image.load("saturn_family1.jpg") Finally, the image needs to be converted to a format Pygame can more easily work with. To do that, we append .convert() to the command to call the convert function. The function .convert() is a method in the Image class. We'll talk more about classes, objects, and methods in Chapter 12. All images should be loaded using code similar to the line below. Just change the variable name and file name as needed. background_image = pygame.image.load("saturn_family1.jpg").convert() Loading the image should be done before the main program loop. While it would be possible to load it in the main program loop, this would cause the program to fetch the image from the disk twenty or so times per second. This is completely unnecessary. It is only necessary to do it once at program start-up. To display the image use the blit command. This “blits” the image bits to the screen. We've already used this command once before when displaying text onto a game window back in Chapter 5. The blit command is a method in the screen variable, so we need to start our command by screen.blit. Next, we need to pass the image to blit, and where to blit it. This command should be done inside the loop so the image gets drawn each frame. See below: screen.blit(background_image, [0, 0]) This code blit's the image held in background_image to the screen starting at (0, 0). 11.3 Moving an Image Now we want to load an image and move it around the screen. We will start off with a simple orange space ship. You can get this and many other great assets from http://kenney.nl/. See Figure 11.3. The image for the ship can be downloaded from the book's website, or you can find a .gif or .png that you like with a white or black background. Don't use a .jpg. To load the image we need the same type of command that we used with the background image. In this case, I'm assuming the file is saved as player.png. player_image = pygame.image.load("player.png").convert() Inside the main program loop, the mouse coordinates are retrieved, and passed to another blit function as the coordinates to draw the image: # Get the current mouse position. This returns the position # as a list of two numbers. player_position = pygame.mouse.get_pos() x = player_position[0] y = player_position[1] # Copy image to screen: screen.blit(player_image, [x, y]) This demonstrates a problem. The image is a space ship with a solid black background. So when the image is drawn the program shows Figure 11.4. We only want the space ship, not a rectangular background! But all images we can load are rectangles, so how do we show only the part of the image we want? The way to get around this is to tell the program to make one color “transparent” and not display. This can be done immediately after loading. The following makes the color black (assuming BLACK is already defined as a variable) transparent: player_image.set_colorkey(BLACK) This will work for most files ending in .gif and .png. This does not work well for most .jpg files. The jpeg image format is great for holding photographs, but it does subtly change the image as part of the algorithm that makes the image smaller. Images in .gif and .png are also compressed, but the algorithms used in those formats do not change the image. The format .bmp isn't compressed at all, and results in huge files. Because the .jpg format changes the format, this means that not all of the background color will be the exactly the same. In Figure 11.5 the space ship has been saved as a jpeg with a white background. The white around the ship is not exactly (255, 255, 255), but just really close. If you are picking out an image that will be transparent, choose a .gif or .png. These are the best formats for graphic art type of images. Photos should be .jpg. Keep in mind it is not possible to change a .jpg to another format just by renaming the file extension to .png. It is still a .jpg even if you call it something different. It requires conversion in a graphics program to change it to a different format. But once in a .jpg format, it has been altered and converting it to a .png won't fix those alterations. Here are three great places to find free images to use in your program: Kenney.nl OpenGameArt.org HasGraphics.com 11.4 Sounds In this section we'll play a laser sound when the mouse button is clicked. This sound originally came from Kenney.nl. You can download and save the sound here: ProgramArcadeGames.com/python_examples/en/laser5.ogg Like images, sounds must be loaded before they are used. This should be done once sometime before the main program loop. The following command loads a sound file and creates a variable named click_sound to reference it: click_sound = pygame.mixer. Sound("laser5.ogg") We can play the sound by using the following command: click_sound.play() But where do we put this command? If we put it in the main program loop it will play it twenty times or so per second. Really annoying. We need a “trigger.” Some action occurs, then we play the sound. For example this sound can be played when the user hits the mouse button with the following code: for event in pygame.event.get(): if event.type == pygame.QUIT: done = True elif event.type == pygame.MOUSEBUTTONDOWN: click_sound.play() Uncompressed sound files usually end in .wav. These files are larger than other formats because no algorithm has been run on them to make them smaller. There is also the ever popular .mp3 format, although that format has patents that can make it undesirable for certain applications. Another format that is free to use is the OGG Vorbis format that ends in .ogg. Pygame does not play all .wav files that can be found on the Internet. If you have a file that isn't working, you can try using the program Audacity to convert it to an ogg-vorbis type of sound file that ends in .ogg. This file format is small and reliable for use with pygame. If you want background music to play in your program, then check out the on-line example section for: ProgramArcadeGames.com/en/python_examples/f.php?file=background_music.py Please note that you can't redistribute copyrighted music with your program. Even if you make a video of your program with copyrighted music in the background YouTube and similar video sights will flag you for copyright violation. Great places to find free sounds to use in your program: OpenGameArt.org www.freesound.org 11.5 Full Listing """ Sample Python/Pygame Programs Simpson College Computer Science http://programarcadegames.com/ http://simpson.edu/computer-science/ Explanation video: http://youtu.be/4YqIKncMJNs Explanation video: http://youtu.be/ONAK8VZIcI4 Explanation video: http://youtu.be/_6c4o41BIms """ import pygame # Define some colors WHITE = (255, 255, 255) BLACK = (0, 0, 0) # Call this function so the Pygame library can initialize itself pygame.init() # Create an 800x600 sized screen screen = pygame.display.set_mode([800, 600]) # This sets the name of the window pygame.display.set_caption('CMSC 150 is cool') clock = pygame.time. Clock() # Before the loop, load the sounds: click_sound = pygame.mixer. Sound("laser5.ogg") # Set positions of graphics background_position = [0, 0] # Load and set up graphics. background_image = pygame.image.load("saturn_family1.jpg").convert() player_image = pygame.image.load("playerShip1_orange.png").convert() player_image.set_colorkey(BLACK) done = False while not done: for event in pygame.event.get(): if event.type == pygame.QUIT: done = True elif event.type == pygame.MOUSEBUTTONDOWN: click_sound.play() # Copy image to screen: screen.blit(background_image, background_position) # Get the current mouse position. This returns the position # as a list of two numbers. player_position = pygame.mouse.get_pos() x = player_position[0] y = player_position[1] # Copy image to screen: screen.blit(player_image, [x, y]) pygame.display.flip() clock.tick(60) pygame.quit() 11.6 Review 11.6.1 Multiple Choice Quiz Click here for a multiple-choice quiz. 11.6.2 Short Answer Worksheet Click here for the chapter worksheet. Click here for the chapter lab. You are not logged in. Log in here and track your progress. English version by Paul Vincent Craven Spanish version by Antonio Rodríguez Verdugo Russian version by Vladimir Slav Turkish version by Güray Yildirim Portuguese version by Armando Marques Sobrinho and Tati Carvalho Dutch version by Frank Waegeman Hungarian version by Nagy Attila Finnish version by Jouko Järvenpää French version by Franco Rossi Korean version by Kim Zeung-Il Chinese version by Kai Lin
1.1 2.1 3.1 4.1 5.1 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 35.1 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 45.1 46.1 47.1 48.1 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 60.1 61.1 62.1 63.1 64.1 65.1 66.1 67.1 68.1 69.1 70.1 71.1 72.1 73.1 74.1 75.1 76.1 77.1 78.1 79.1 80.1
Arcade Türü Oyun Programlamayıve Bilgisayar Bilimleri Öğrenin English Dutch - Nederlands French Hungarian - Magyar Portuguese - Português Russian - Pycckий Spanish - Español Turkish - Türkçe Chapter 14: Hareketli Grafiklere(Sprites) Giriş Sprite daha geniş bir sahnenin bir parçası olan iki boyutlu grafiktir. Genel olarak spritelar sahnede etkileşime geçilecek bazı nesne türleridir. Önceden, spritelar eski oyun konsollarının donanımları tarafından özellik olarak destekleniyordu. Bu özelleştirilmiş donanım desteği artık gerekmiyor, fakat bu kelime hala varlığını sürdürüyor. Pygame kütüphanesi spriteları destekliyor. Bu kod animasyon yönetiminde, çarpışma tespitinde ve sprite gruplarının yönetiminde yardımcı oluyor. 14.1 Basit Spritelar and Çarpışmalar Bu örnek siyah bloklar içeren ve fare ile kontrol edilen siyah bir blok yardımıyla onların toplanacağı bir ekranın nasıl oluşturulacağını gösteriyor. Program "skoru" kaç tane bloğun toplandığına göre tutuyor. Bu örneğin kodu şu adreste bulunabilir: http://cs.simpson.edu/index.php?chapter=example_code # Sample Python/Pygame Programları # Simpson College Bilgisayar Bilimi # http: cs.simpson.edu import pygame import random # Bazı renkleri tanımla black = ( 0, 0, 0) white = ( 255, 255, 255) red = ( 255, 0, 0) Pygame kütüphanesi sprite desteği için import edilir. Random kütüphanesi blokların rastgele yerleşebilmesi için import edilir. Renklerin tanımı standarttır; henüz bu örnekte yeni olan hiçbir şey yoktur. # Bu sınıf topu temsil ediyor # Pygame içerisindeki "Sprite" sınıfından türüyor class Block(pygame.sprite.Sprite): Bu kod Block sınıfının tanımını başlatıyor. 15. satırda bu sınıfın Sprite sınıfının bir alt sınıfı olduğuna dikkat edin. pygame.sprite. bu derste daha sonra tartışılacak olan kütüphaneyi ve paketi belirtiyor. Sprite sınıfının tüm varsayılan işlevselliği şu an Block sınıfının bir parçası durumunda. # Yapıcı. Rengi ve onun x ve y konumlarını # bloğa aktar def __init__(self, color, width, height): # Üst sınıfın (Sprite) yapıcı fonksiyonunu çağır super().__init__() Block sınıfı için olan yapıcı fonksiyon self'i tıpkı diğer bütün yapıcı fonksiyonlar gibi bir parametre olarak alıyor. Ayrıca nesnenin rengi(color), yüksekliği(height) ve genişliğini(width) de parametre olarak alıyor. Sprite'ın içerisindeki ebeveyn sınıf yapıcı fonksiyonunu çağırmak spriteları başlatabilmeye imkan sağladığı için önemlidir. Bu satır 21'de yapılmıştır. # Bloğun bir resmini oluştur ve onu bir renkle doldur. # Bu aynı zamanda diskten yüklenen bir resim de olabilir. self.image = pygame.Surface([width, height]) self.image.fill(color) Bu kod aslında sonunda ekranda görünecek olan resmi oluşturuyor. 25. satır boş bir resim oluşturuyor. 26. satır onu siyah renkle boyuyor. Program siyah kareden başka bir şeye ihtiyaç duyarsa, bunlar değiştirilecek kod satırlarıdır. Örneğin, alttaki koda göz atın: self.image = pygame.Surface([width, height]) self.image.fill(white) self.image.set_colorkey(white) pygame.draw.ellipse(self.image,color,[0,0,width,height]) Bu kod bu şekilde değiştirilmiş olsaydı, her şey elips şeklinde olurdu. 25. satır elipsi boyuyor ve 26. satır beyazı saydam bir renk yapıyor. self.image = pygame.image.load("player.png").convert() self.image.set_colorkey(white) Eğer bunların yerine bit eşlemli bir grafik isteniyorsa, yukarıdaki kodları kullanmak bir grafiği yükleyecek ve beyaz rengi saydam arkaplan resmi olarak ayarlayacaktır. Bu durumda, sprite'ın boyutları otomatik olarak grafiğin boyutlarına ayarlanacaktır ve boyutları ona aktarmak artık gerekmeyecektir. # Resmin boyutlarına sahip dikdördgen nesneyi # getir # Bu nesnenin yerini rect.x ve rect.y'yi atayarak # güncelle self.rect = self.image.get_rect() rect niteliği Pygame'in sağladığı Rect sınıfının örneği olan bir değişkendir. Dikdördgen, sprite'ın iki boyutunu temsil eder. Bu dikdördgen sınıfı ayarlanabilir olan x ve y için niteliklere sahiptir. Pygame x ve y niteliklerinin olduğu yere sprite'ı çizecektir.Yani bu sprite'ı değiştirmek için programcının mySpriteRef.rect.x ve mySpriteRef.rect.y değerlerini ayarlaması gerekmektedir. Burada mySpriteRef, sprite'ın olduğu değişkene tekabül etmektedir. # Pygame'i başlat pygame.init() # Ekranın yüksekliğini ve genişliğini ayarla screen_width=700 screen_height=400 screen=pygame.display.set_mode([screen_width,screen_height]) Bu kod pygame'i başlatıyor ve pygame için bir pencere oluşturuyor. Burada diğer pygame programlarından farklı yeni bir şey yok. # Bu 'sprite'ların bir listesi. Programdaki her blok # bu listeye ekleniyor. # Bu liste 'Group' denen bir sınıfla yönetiliyor. block_list = pygame.sprite.Group() # Bu her sprite'ın listesi # Bütün bloklar ve oyuncu bloğu da burada. all_sprites_list = pygame.sprite.Group() Spritelar ile çalışmanın büyük bir avantajı listedeki öğelerle çalışma yeteneği. Tüm nesneleri bir çarpışma olup olmadığı konusunda kontrol etmek yerine, program basitçe listedeki tüm nesneleri çarpışmaya karşı kontrol ediyor. Aynı şekilde, sprite gruplarının tamamı konumlarını güncelleyebilir ve basitçe listeye güncellemesi ve çizmesi söylenerek çizilebilir. Bu otomatik olarak listedeki tüm öğeleri güncelleyecek ve çizecektir. Yukarıdaki kod iki liste oluşturuyor. all_sprites_list değişkeni oyundaki her sprite'ı içeriyor. Bu liste tüm spritelar çizilirken kullanılacak. ball_list değişkeni oyuncunun çarpışabileceği her nesneyi tutuyor. Bu örnekte oyuncununki dışında oyundaki her nesneyi içeriyor. Kesin olduğu üzere oyuncu nesnesi, oyuncu nesnesiyle çarpışamaz, sonuç olarak da program oyuncu nesnesinin olmadığı bir listeye ihtiyaç duyar. for i in range(50): # Bu tek bir bloğu temsil ediyor block = Block(black, 20, 15) # Blok için rastgele konum belirleniyor block.rect.x = random.randrange(screen_width) block.rect.y = random.randrange(screen_height) # Bloğu nesnelerin listesine ekliyor block_list.add(block) all_sprites_list.add(block) Bu döngü 46. satırda başlıyor ve 50 adet siyah sprite bloğunu ekrana ekliyor. 48. satır yeni bir blok oluşturuyor; rengini, genişliğini ve yüksekliğini belirliyor. 51 ve 52. satırlar nesnenin görüneceği yerin koordinatlarını ayarlıyor. 55. satır bloğu oyuncunun çarpışabileceği blokların listesine ekliyor. 56. satırda ise bütün blokların olduğu listeye ekliyor. # Kırmızı bir oyuncu bloğu oluştur player = Block(red, 20, 15) all_sprites_list.add(player) 59. satır sonunda oyuncu görevi görecek bir kırmızı blok oluşturuyor. Bu blok çizilebilmesi için all_sprites_list listesine ekleniyor. # Kullanıcı kapatma düğmesine basana kadar döngü done=False # Ekranın ne hızla güncelleneceğini yönetmek için kullanılır clock=pygame.time.Clock() score = 0 # -------- Ana Program Döngüsü ----------- while done==False: for event in pygame.event.get(): # Kullanıcı bir şey yaptı if event.type == pygame.QUIT: # Kullanıcı kapat butonuna bastıysa done=True # Oyunun bittiğini ve döngüden çıkılmasını söyle # Ekranı temizle screen.fill(white) Bu standart program döngüsüdür. 85. satır skoru 0 olarak başlatmaktadır. # Geçerli fare konumunu al. Bu konumu iki sayıdan oluşan # bir liste olarak döndürecektir. pos = pygame.mouse.get_pos() # x ve y değerlerini listeden al, # tıpkı stringden harfleri alırken yaptığımız gibi. # Oyuncu blok nesnesini fare konumuna ayarla player.rect.x=pos[0] player.rect.y=pos[1] 81. satır daha önce tartışılan diğer Pygame programlarına benzer şekilde fare konumunu alıyor. Önemli olan yeni kısım 86-87 numaralı satırlarda sprite'ı içeren dikdördgen yeni bir konuma hareket ettirilirken görülüyor. Bu dikdördgenin 32. satırda oluşturulduğunu ve bu kodun bu satır olmadan çalışmayacağını unutmayın. # Kullanıcı bloğunun herhangi bir şeyle çarpışıp çarpışmadığını kontrol et blocks_hit_list = pygame.sprite.spritecollide(player, block_list, True) Kodun bu satırı player olarak çağırılan sprite'ı alır ve block_list'in içerisindeki tüm bloklara karşı kontrol eder. Bu kod üst üste binen spriteların bir listesini döndürür. Eğer böyle bir sprite yoksa, boş bir liste döndürür. Mantıksal olan True çarpışan spriteları listeden siler. Eğer bu parametre False olarak ayalanırsa spritelar silinmeyecektir. # Çarpışma listesini kontrol et. if len(blocks_hit_list) > 0: score +=len(blocks_hit_list) print( score ) Bu kod, çarpışma listesinde herhangi bir sprite olup olmadığını kontrol eder. Eğer varsa, skoru çarpışılan sprite kadar arttırır. Ardından skoru ekrana yazdırır. 95. satırdaki yazdırma olayının skoru ana pencereye spritelar ile yazdırmadığına, ekran yerine konsola yazdırdığına dikkat edin. # Tüm spriteları çiz all_sprites_list.draw(screen) Bu all_sprites_list içerisindeki tüm spriteların öizilmesine sebep olur. # Saniyede 20 frame (20 FPS) ile sınırla clock.tick(20) # İlerle ve ekranı çizdirdiğimiz son hali ile güncelle pygame.display.flip() pygame.quit() Bu ekranı günceller, ve döngü bittiğinde quit metodunu çağırır. 14.2 Hareket Eden Spritelar Şu ana kadarki örnekte, sadece oyuncu sprite'ı hareket etti. Program tüm spriteların hareket etmesine nasıl sebep olabilir? Bu kolayca yapılabilir, sadece iki aşama gereklidir. İlk aşama Block sınıfına yeni bir metot eklemektir. Bu yeni metot update olarak adlandırılır. Bu update fonksiyonu update metodu çağırıldığında tüm liste için otomatik olarak çağırılacaktır. Şunu sprite'ın içine koyun: def update(self): # Bloğu 1 piksel aşağı oynat self.rect.y += 1 Şunu ana program döngüsüne koyun: # block_list içerisindeki tüm bloklar için update() metodunu çağır block_list.update() Bu kod mükemmel değildir çünkü bloklar ekrandan düşmekte ve tekrar görünmemektedir. Bu kod update fonksiyonunu blokların üstten tekrar görünebilmesi için geliştirecektir. def update(self): # Bloğu bir piksel oynat self.rect.y += 1 if self.rect.y > screen_height: self.rect.y = random.randrange(-100,-10) self.rect.x = random.randrange(0,screen_width) Programın toplanan blokları ekranın üst kısmından sıfırdan bırakması gerekiyorsa, sprite aşağıdaki kod ile değiştirilebilir: def reset_pos(self): self.rect.y = random.randrange(-100,-10) self.rect.x = random.randrange(0,screen_width) def update(self): # Bloğu bir piksel aşağı kaydır self.rect.y += self.change_y if self.rect.y > screen_height: self.reset_pos() self.game.score -= 1 Çarpışma olduğunda blokları yok etmektense, onun yerine program reset_pos fonksiyonunu çağıracak ve blok toplanmaya hazır bir şekilde ekranın üst kısmına gidecektir. # Oyuncu bloğunun bir şeye çarpıp çarpmadığına bak blocks_hit_list = pygame.sprite.spritecollide(player, block_list, True) # Çarpışma listesini kontrol et. if len(blocks_hit_list) > 0: score +=len(blocks_hit_list) print( score ) Yukarıdaki kodu bulun. Blokların yok olmaması için True ifadesini False olarak değiştirin. if ifadesini oyuncunun çarpıştığı her blok için dönecek bir for döngüsüne çevirin. Bu döngüde her blok için block.reset_pos() metodunu çağırın. ProgramArcadeGames.com/python_examples/en/sprite_sheets You are not logged in. Log in here and track your progress. English version by Paul Vincent Craven Spanish version by Antonio Rodríguez Russian version by Vladimir Slav Turkish version by Güray Yildirim Portuguese version by Armando Marques Sobrinho and Tati Carvalho Dutch version by Frank Waegeman Hungarian version by Nagy Attila French version by Franco Rossi