PSP-Python lezione n.2

« Older   Newer »
 
  Share  
.
  1. Darkman-92™
     
    .

    User deleted


    LEZIONE N. 02: "visualizzazione ed animazione immagini

    Eccoci giunti alla seconda "lezione" di psp-python.

    In questa lezione vedremo come visualizzare immagini a video e come animarle.

    Qualche informazione utile:

    -Documentazione in italiano di Python: http://python.it/doc/Python-Docs/html/
    -Homepage di psp-python: http://fraca7.homeunix.net/trac/
    -Documentazione modulo psp2d: http://fraca7.homeunix.net/trac/wiki/PSP2d
    -Documentazione modulo pspsnd: http://fraca7.homeunix.net/trac/wiki/PSPSnd
    -Documentazione modulo pspos: http://fraca7.homeunix.net/trac/wiki/PSPOS
    -Documentazione modulo pspnet: http://fraca7.homeunix.net/trac/wiki/PSPNet

    Materiale necessario

    PACCHETTO CONTENENTE IMMAGINI E ALTRO

    Lo stesso codice più il font e le immagini lo potete trovare nel Pacchetto nella cartella esempio_2

    # -*- coding: iso-8859-1 -*-
    #Esempio 02: "Immagini"
    import psp2d, pspos

    #Setto velocità processore e bus (all'avvio è a 333)
    pspos.setclock(222)
    pspos.setbus(111)

    screen = psp2d.Screen()
    screen.clear(psp2d.Color(0,0,0))

    #Carico il font:
    font = psp2d.Font('font.png')

    #Carico l'immagine di background:
    bkgImage = psp2d.Image('bkg.png')

    #Carico l'immagine dello sprite:
    spriteImage = psp2d.Image('sprite.png')

    #Creo uno sprite:
    squareImage = psp2d.Image(50, 50)
    squareImage.clear(psp2d.Color(100, 100, 100, 200))

    #Posizione di partenza del quadrato:
    direzione = +3
    posX = 0
    posY = 125

    #Loop principale:
    while True:
    #Disegno lo sfondo:
    screen.blit(bkgImage, 0, 0, bkgImage.width, bkgImage.height, 0, 0, True)

    #Disegno lo sprite:
    screen.blit(spriteImage, 0, 0, spriteImage.width, spriteImage.height, 200, 100, True)

    #Disegno il quadrato:
    screen.blit(squareImage, 0, 0, squareImage.width, squareImage.height, posX, posY, True)

    #Scrivo a video:
    font.drawText(screen, 10, 240, "Premi Triangolo per salvare uno screenshot")
    font.drawText(screen, 10, 255, "Premi X per uscire")

    #Disegno fisicamente il video:
    screen.swap()

    #Calcolo la nuova posizione del quadrato:
    posX += direzione
    if posX + squareImage.width >= 480
    or posX <= 0:
    direzione = -1 * direzione

    #Controllo se è stato premuto X:
    pad = psp2d.Controller()
    if pad.cross:
    break
    elif pad.triangle:
    screen.saveToFile("screenshot.png")



    Vediamo le novità introdotte rispetto alla lezione 01.

    bkgImage = psp2d.Image('bkg.png')



    In questo modo viene caricata in memoria l'immagine bkg.png nella variabile bkgImage.
    A proposito di immagini: psp-python è in grado di leggere sia png che jpg, ma personalmente vi consiglio di usare sempre png perché con il formato jpeg ho avuto qualche problema (in più, fatto non trascurabile, il formato png gestisce le trasparenze).
    Nello stesso modo viene caricato uno sprite da file png.

    spriteImage = psp2d.Image('sprite.png')



    Diverso è invece il secondo sprite (un quadrato grigio semitrasparente).
    Questo viene creato programmativamente (non esiste cioè nessuna immagine salvata sulla ms).
    Vediamo come si costruisce una immagine in memoria:

    squareImage = psp2d.Image(50, 50)



    Questa istruzione crea una immagine di 50x50 pixel vuota.

    squareImage.clear(psp2d.Color(100, 100, 100, 200))



    Questa istruzione, invece, colora l'immagine appena creata col colore RGB 100, 100, 100 e trasparenza a 200.
    Il valore di trasparenza va da 0 (completamente trasparente) a 255 (colore pieno).

    Veniamo ora alla visualizzazione di tutte queste immagini.
    Per visualizzare una immagine a video si usa il metodo blit dell'oggetto screen nel seguente modo:

    screen.blit(immagine, x1, y1, width, height, posX, posY, blend)



    I valori x1, y1, width, height definiscono la sezione di immagine che verrà visualizzata a video.
    Il parametro blend può essere True (vengono gestite le trasparenze) o False (non vengono gestite le trasparenze).

    Avendo una immagine di 100x100, per esempio, sarebbe possibile disegnare a video solo il quadrato centrale di 10x10 con una istruzione tipo:

    screen.blit(immagine, 45, 45, 10, 10, posX, posY)



    E' così comprensibile l'istruzione che disegna lo sfondo:


    screen.blit(bkgImage, 0, 0, bkgImage.width, bkgImage.height, 0, 0, True)



    Che disegna tutta l'immagine (il quadrato 0, 0, bkgImage.width, bkgImage.height) alla posizione 0, 0.
    Scopriamo così che per sapere altezza e larghezza di una immagine basta leggerne le proprietà width ed height.

    Veniamo ora alla parte "difficile" (non lo è affatto in realtà): l'animazione del secondo sprite.
    Animare lo sprite e farlo muovere a video significa semplicemente disegnarlo in posizioni differenti ad ogni frame.
    Fuori dal loop principale viene definita la posizione iniziale dello sprite e la sua direzione (di quanti pixel si sposta ad ogni frame):

    direzione = +3
    posX = 0
    posY = 125



    La prima volta che viene eseguita l'istruzione

    screen.blit(squareImage, 0, 0, squareImage.width, squareImage.height, posX, posY)



    L'immagine viene quindi disegnata alla posizione 0, 125
    Dobbiamo adesso modificarne la posizione, facendo in modo che al prossimo frame il quadrato venga disegnato in una posizione differente.

    #Calcolo la nuova posizione del quadrato:
    posX += direzione
    if posX + squareImage.width >= 480
    or posX <= 0:
    direzione = -1 * direzione



    Visto che il quadrato si muove solo verso destra e verso sinistra ci basta modificare la sua posizione sull'asse delle X.
    Aggiungiamo alla posizione attuale (posX) il valore di direzione (che inizialmente vale +3) spostando il quadrato a destra di tre pixel.
    Dobbiamo però controllare che non esca dal video.

    if posX + squareImage.width >= 480
    or posX <= 0:
    direzione = -1 * direzione



    Se la nuova posizione calcolata più la larghezza dell'immagine è maggiore di 480 (la dimensione del video della PSP) allora siamo arrivati in fondo e dobbiamo cambiare direzione.
    Moltiplicando per -1 direzione lo "trasformiamo" in -3
    Al frame successivo la variabile posX verrà ridotta di tre pixel e non incrementata.
    La stessa cosa vale per il bordo sinistro del video.

    Ultima novità: il salvataggio di uno screenshot:

    screen.saveToFile("screenshot.png")



    Con questa istruzione viene salvata una copia del video nel file screenshot.png.

    La lezione è finita, Spero che sia chiara e che sia utile a qualcuno.

    Tutorial by Sakya
     
    .
0 replies since 19/9/2008, 19:23   243 views
  Share  
.