Creare uno splash screen in Android

Gli splash screen sono utilizzati per mostrare all’utente del testo o delle immagini statiche prima ancora del completo caricamento dell’applicazione, soprattutto quando il caricamento richiede alcuni secondi. Senza un buon splash screen l’utente vede semplicemente uno schermo nero: più di 4-5 secondi di nero possono far desistere l’utente dal continuare ad aspettare!

Di solito uno splash screen è semplicemente una immagine a tutto schermo che mostra il nome dell’applicazione, il logo, del testo o, nelle versioni più evolute, una barra di caricamento.

popular_apps_splash_screens

Realizzare uno splash screen in Android è abbastanza semplice.

Creiamo una nuova blank activity, chiamiamola ad esempio “start”:

Screen shot 2015-07-19 at 1.59.12 PM

Possiamo cambiare il colore dello sfondo, aggiungere qualsiasi immagine e/o testo preferiamo.

Impostiamo ora l’activity come activity principale. Sarà la prima ad essere lanciata all’avvio dell’applicazione. A tal fine modifichiamo il manifest.xml in questo modo:


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="gianluca.connect4" >

    <application android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity android:name=".start"
            android:label="@string/app_name" >
            <intent -filter>
                <action android:name="android.intent.action.MAIN"></action>
                <category android:name="android.intent.category.LAUNCHER"></category>
            </intent>
        </activity>
    </application>
</manifest>

Ridefiniamo ora il metodo onCreate() nel sorgente start.java in questo modo:

public class start extends Activity
{
    int timeout = 2000;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_start);

        new Handler().postDelayed(new Runnable()
        {
            @Override
            public void run()
            {
                Intent i = new Intent(start.this, main.class);
                startActivity(i);
                finish();
            }
        }, timeout);
    }
}

Praticamente non facciamo altro che creare un nuovo oggetto Runnable (un nuovo thread) e ne posticipiamo l’esecuzione a 2 secondi dall’evento onCreate(). L’intent che andiamo a creare chiamerà l’activity main che nel nostro caso è la prossima schermata dell’applicazione.

Avviando l’applicazione vedremo lo splash screen per 2 secondi, poi verrà lanciata l’activity main.
Il tempo di attesa impostato per lo splash screen può essere sfruttato in vari modi:

  • Caricare oggetti locali particolarmente pesanti (immagini, file audio etc..)
  • Accedere a risorse in rete e scaricare dati da backend remoti
  • Avviare, riavviare, disabilitare device locali (wifi, bluetooth etc..)
  • Nessuna operazione particolare, solo mostrare il nome dell’app, i contatti etc..

Motore 3D in C++ – Raycasting parte II – texture mapping

Nella prima parte abbiamo visto come implementare un motore 3D basato su raycasting. Il motore realizzato è abbastanza spartano e prevede colori piatti sia per i muri che per soffitto e pavimento. Aggiungiamo ora le texture.

Prendiamo una immagine quadrata 256×256 pixel, ad esempio questa:

stone

Questa sarà la nostra texture che andremo ad applicare ai muri nel rendering finale della scena 3D. Siccome abbiamo stabilito che l’ambiente 3D è composto unicamente da semplici cubi una texture quadrata è l’ideale per texturizzare tutte le facce.

Come funziona il texture mapping?

L’idea base è quella di considerare questa volta non soltanto la lunghezza del raggio ma calcolare anche lo scostamento rispetto alla faccia del blocco. In figura si mostra il raggio uscente (in giallo), la collisione con il blocco e lo scostamento (in nero) rispetto alla faccia del blocco stesso:
raycasting - texture mapping

Lo scostamento ci serve per recuperare la “striscia” verticale di texture (1 x 256 pixel) da riscalare opportunamente (in funzione della lunghezza del raggio, come visto nella prima parte) e applicare al posto della semplice riga verticale monocolore. Ripetendo il processo per ogni singolo raggio otteniamo il texture mapping completo della scena.

Caricamento della texture da file esterno

Per prima cosa occorre caricare la texture da una immagine esterna. Nel mio caso ho utilizzato il formato non compresso TGA perchè estremamente semplice da leggere (una collezione lineare di triple RGB).

Aggiungiamo al codice dei define per le dimensioni della texture:

#define TEXT_W 256
#define TEXT_H 256

definiamo la struttura dati Texture: altezza, larghezza e puntatore al vettore di pixel RGB.

struct Texture
{
	uint32_t width;
	uint32_t height;
	TrueColorPixel *data;
};

Modifichiamo la struttura dati RayHit aggiungendo lo scostamento di cui parlavamo prima: blockOffset e wallX. Il primo è lo scostamento in coordinate texture (i pixel di scostamento rispetto alla dimensione della texture), il secondo è lo scostamento in coordinate mappa 2D (un valore floating point compreso tra 0 ed 1).

struct RayHit
{
	double distance;
	int mapX;
	int mapY;
	double wallX;
	double rayDirX;
	double rayDirY;
	int side;
	uint32_t blockOffset;
};

Definiamo la variabile globale stone

Texture stone;

Nel main() carichiamo la texture. Si tratta di aprire e leggere il file “stone.tga” e allocare un vettore di 65536 byte (246×256) in stone.data. Per i dettagli della funzione LoadTexture basta dare un’occhiata al sorgente.

	if (!LoadTexture("stone.tga", &stone))
	{
		printf("\nError loading texture file!");
		exit(0);
	}

A questo punto, nella funzione RenderScence, subito dopo aver calcolato la lunghezza del raggio, calcoliamo lo scostamento (sia wallX che blockOffset):

		// calcola wallX ovvero l'offset x del blocco colpito dal raggio
		double wallX;
		if (side == 1)
		{
			wallX = rayPosX + ((mapY - rayPosY + (1 - stepY) / 2) / rayDirY) * rayDirX;
		}
		else
		{
			wallX = rayPosY + ((mapX - rayPosX + (1 - stepX) / 2) / rayDirX) * rayDirY;
		}
		wallX -= floor((wallX));

		// riga della texture (in coordinate texture) 
		int texX = int(wallX * double(TEXT_W));
		
		// inverti in base alla posizione del raggio
		if (side == 0 && rayDirX > 0)
		{
			texX = TEXT_W - texX - 1;
		}
		if (side == 1 && rayDirY < 0)
		{
			texX = TEXT_W - texX - 1;
		}

		// carica RayHit con le informazioni per disegnare la colonna
		RayHit what;
		what.distance = perpWallDist;
		what.blockOffset = texX;
		what.mapX = mapX;
		what.mapY = mapY;
		what.side = side;
		what.rayDirX = rayDirX;
		what.rayDirY = rayDirY;
		what.wallX = wallX;

Nella DrawColumn anzichè disegnare una colonna di pixel piatti, disegnamo una striscia verticale di texture opportunamente riscalata:

	// disegna colonna
	for (uint32_t c = cropup; c < (colh - cropdown); c++)
	{
		// calcola il pixel da prelevare nella texture
		double d = (double)c / (double)colh;
		int texY = ((int)(d * TEXT_H)) % TEXT_H;
		TrueColorPixel t = texture.data[what.blockOffset + texY * TEXT_W];

		// disegna il pixel della texture
		frame.data[index].r = t.r;
		frame.data[index].g = t.g;
		frame.data[index].b = t.b;

		index += frame.width;
	}

Il risultato finale è questo:
raycasting - texture mapping

A questo punto diventa abbastanza banale creare più di una immagine texture, caricarle tutte in memoria e texturizzare i blocchi utilizzando la texture oppurtuna (in funzione ad esempio numero intero associato al blocco, nel file world.txt).

Questo il codice sorgente completo con texture mapping

Il risultato finale:

Pavimento e soffitto

Il pavimento e soffitto possono essere rendirizzati con una tecnica analoga. Innanzitutto, siccome abbiamo visto che la geometria del rendering finale è simmetrica rispetto all’asse verticale dello schermo allora lo sarà anche il pavimento rispetto al soffitto. Una volta che sappiamo texturizzare il pavimento basta “ribaltarlo” in verticale per ottenere il soffitto (magari cambiando immagine texture).

Procediamo con il redenring del pavimento: per ogni colonna di pixel dello schermo e immediatamente dopo aver disegnato la riga muro, occorre procedere in questo modo:

Si considera il segmento di pixel verticale rimanente per raggiungere il fondo dello schermo. Si calcolano le coordinate mondo di ogni pixel di questo segmento. Ad ogni coordinata mondo corrisponde un preciso punto nella texture 256×256 di pavimento. Si disegna quel pixel con il colore della texture in quel punto. Ripetendo per tutte le colonne otteniamo la texture completa del pavimento.

Per disegnare il soffitto non occorre ricalcolare altri punti. Sapendo che è simmetrico rispetto al pavimento è sufficiente cambiare texture ed usare gli stessi punti trovati per il pavimento. Ovviamente avendo cura di ribaltare il plot sull’asse verticale.

	// posizione X,Y del texel della texture proprio sotto il muro
	double floorXWall, floorYWall;

	// 4 possibili direzioni del muro
	if (what.side == 0 && what.rayDirX > 0)
	{
		floorXWall = what.mapX;
		floorYWall = what.mapY + what.wallX;
	}
	else if (what.side == 0 && what.rayDirX < 0)
	{
		floorXWall = what.mapX + 1.0;
		floorYWall = what.mapY + what.wallX;
	}
	else if (what.side == 1 && what.rayDirY > 0)
	{
		floorXWall = what.mapX + what.wallX;
		floorYWall = what.mapY;
	}
	else
	{
		floorXWall = what.mapX + what.wallX;
		floorYWall = what.mapY + 1.0;
	}

	double distWall, distPlayer, currentDist;
	distWall = what.distance;
	distPlayer = 0.0;

	// disegna pavimento e soffitto
	uint32_t c = (colh + frame.height) / 2;
	
	while (c < frame.height) // per ogni pixel al di sotto della colonna muro
	{
		// calcola la distanza
		currentDist = frame.height / (2.0 * c - frame.height);
		double weight = (currentDist - distPlayer) / (distWall - distPlayer);

		// calcola il punto X,Y nel blocco corrente
		double currentFloorX = weight * floorXWall + (1.0 - weight) * state.posx;
		double currentFloorY = weight * floorYWall + (1.0 - weight) * state.posy;
		
		// calcola il punto X,Y nella texture del pavimento
		int floorTexX, floorTexY;
		floorTexX = int(currentFloorX * 256) % 256;
		floorTexY = int(currentFloorY * 256) % 256;
		
		if(CAST_FLOOR)
		{
			// pixel di pavimento (relativo alla colonna column)
			TrueColorPixel f = tiles.data[floorTexX + floorTexY * 256];
			frame.data[index].r = f.r;
			frame.data[index].g = f.g;
			frame.data[index].b = f.b;
		}

		if(CAST_CEILING)
		{
			// pixel di soffitto (relativo alla colonna column)
			TrueColorPixel g = ceiling.data[floorTexX + floorTexY * 256];
			frame.data[column + (frame.height - c - 1) * frame.width].r = g.r;
			frame.data[column + (frame.height - c - 1) * frame.width].g = g.g;
			frame.data[column + (frame.height - c - 1) * frame.width].b = g.b;
		}
		
		index += frame.width;
		c++;
	}

codice sorgente con texture mapping muri, terreno e soffitto.

Qui potete trovare il sorgente completo (progetto eclipse, immagini texture)