Sziasztok!

Most megnézzük hogyan is lehet rajzolni a canvasra html5-ben javascript segítségével.

Először is hozzunk létre egy új projektet a szokásos módon majd nyissuk meg a default.html  fájlt és adjuk hozzá a következő sort a body-hoz:

<canvas id=”canvas”></canvas>

Ha ezzel megvagyunk a default.js fájlra lesz szükségünk amihez adjuk hozzá az initialize() függvényt az „app.oncheckpoint = function (args) {“ sor elé:

function initialize(){

}

A függvényben akkor inicializáljuk is a canvasunkat:

canvas = document.getElementById(“canvas”);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext(“2d”);

Ezzel letre is hoztunk egy képernyő mértű rajzterületet amire rajzolhatunk különböző dolgokat pl: vonalat téglalalpot…

Néhány példa:

Vonal rajzlása:

context.strokeStyle = ‘#0f0’; // a vonal színe
context.moveTo(20, 20); //innen indul a vonal rajzolása
context.lineTo(100, 30); //ide húzzuk a vonalat
context.lineWidth = 3; //vonalvastagság
context.stroke(); //végül a rajzolás

kitöltött téglalap rajzolása:

context.fillStyle = ‘#00f’;
context.fillRect(600, 50, 100, 200);
context.lineWidth = 5;
context.stroke();

görbe rajzolása:

//gorbe rajzolasa

context.moveTo(20, 50);
context.quadraticCurveTo(190, 700, 400, 50);
context.lineWidth = 1;
context.stroke();

Végül ahhoz, hogy múködjön is a még egy dologra less szükségünk mégpedig meg kell hívnunk az inicialize() függvényt ezt pedig a következőképp tehetjük meg:

document.addEventListener(“DOMContentLoaded”, initialize, false);

ezt a sort kell betennünk mondjuk az “app.start();” sor elé.

Ha meindennel megvagyunk futtasuk a programunkat és ha minden jól megy akkor a következőnek kell megjelennie elöttünk:

a forrásfájl letölthető innen: CanvasDemo1

Üdv.: Balázs

Helló,

Egy kis emlékeztető: Célok

Tehát, ahhoz hogy wondow 8 alatt fejlesszünk ’windows store app’ stílusú alkalmazásokat a következő dolgokra lesz szükségünk:

Windows 8

Visual studio 2012 for win8.

Ha ezek telepítésével megvagyunk kezdőthet is a fejlesztés :).

Nyissuk meg a vs2012-őt és hozzunk létre egy új projektet(FILE->new->project), ezután a  templates-ek küzül válasszuk a JavaScript-et itt pedig a Blank App, állítsuk be a projekt helyét és nevezzük el majd ok. Ha minden jól megy létre is jött a projektünk.

A projekt solution-ében a főbb dolgok a következők:

References (windows library for JavaScript)

css mappa: kezdetben a defaultl.css-t tartalmazza, ide menthetjük a különböző css fájljainkat.

images mappa:  kezdetben itt a programunkban talalható kepek vannak például az alkalmazás indulásánál mi jelenjen meg stb. Ezek a fájlok felül írásával könnyedén cseréljetjük ezeket(érdemes odafigyelni hogy azonos felbontású és méretű képekkel írjuk felól a meglévőket)

js mappa: kezdetben a default.js-t tartalmazza ez fogja indítani az alkalmazásunkat

default.html: (fentebb láthtjuk a tartalmát),A WinJS references részt érdemes minden html oldlunkba bemásolni a References részeit „incloudolja”, itt állíthatjuk monjuk az alkalmazásunk stílusát sötétre vagy világosra az „ui-dark.css”, vagy „ui-light.css” segítségével. Ez után saját referenciáinkat is hozzáadjuk jelen esetben a default.css-t és default.js-t.

Ha mindennel megvagyunk futtasuk a programot, ha még nincs tabletünk (ami jelenleg elég valószínű) akkor két lehetőségünk van a futtatásra, futtathatjuk a saját gépünkön(local machine) vagy szimulátoron (Simulator).

Ha elindítottuk az alkalmazásunkat a következő fog megjelenni: „Content goes here”, ez van a html fájlunk body-jában.

Nos egyenlőre ennyi hamarosan folyt. köv.

Üdv.: Balázs

Kétféle hang van, folytonos háttérzene és effekt hang.

1. Hozzuk létre a megfelelő változókat
SoundEffect effect;
Song music;

2. A Content projekten belül helyezzük el a hangfájlokat. Célszerű egy új mappát létrehozni.

3. A LoadContent() metóduson belül töltsük be a hangokat
music = Content.Load<Song>( “Sound/gameMusic” );
effect = Content.Load<SoundEffect>( “Sound/laserFire” );

4. A háttérzenét még a LoadContent-ben elindítjuk
PlayMusic( music );

5. Ehhez a PlayMusic metódust létre kell hozni
private void PlayMusic(Song song) {
try {
MediaPlayer.Play( song );
MediaPlayer.IsRepeating = true;
} catch {
}
}

6. Az effekt hangot a megfelelő helyeken elindítjuk
effect.Play();

Sokszor szükséges, hogy a játék aktuális állását megjelenítsük.

1.  Hozzuk létre a következő adattagokat:
int score;
SpriteFont font;

2. Az Initialize() metóduson belül adunk egy kezdőértéket a score változónak

3. A Content projekten belül el kell helyeznünk a betűtípust leíró fájlt. Célszerű egy külön mappába tenni.

4. A LoadContent() metóduson belül betöltjük a betűtípust
font = Content.Load<SpriteFont>( “Fonts/gameFont” );

5. A score változóban tároljuk az aktuális pontszámot. Helyezzük el a megfelelő feltételek után a változó értékét módosító műveleteket.

6. A Draw() metóduson belül kirajzoljuk a szöveget a képernyőre
spriteBatch.DrawString( font, “score: ” + score, new Vector2( GraphicsDevice.Viewport.TitleSafeArea.X, GraphicsDevice.Viewport.TitleSafeArea.Y ), Color.White );

1. Hozzunk létre egy új XNA projektet, a típusa Windows Phone Game (4.0). Ilyenkor létrejön már a projektben egy Game1.cs nevű főosztály, ennek adhatunk valami beszédesebb nevet.

2. Hozzunk létre egy új osztályt, ez lesz a játékos.

3. Hozzáadjuk a játékos osztályhoz a szükséges adattagokat, és az ezek eléréséhez szükséges metódusokat.

4. A főosztályban létrehozzuk privát adattagként a játékos(oka)t.

5. Az Initialize() metóduson belül példányosítunk.

6. A LoadContent() metódus csak egyszer hívódik meg, itt helyezzük el a textúrák betöltéséhez szükséges utasításokat.

7. A Draw() metódusban hívjuk meg a kirajzoláshoz szükséges metódusokat.

8. A képernyő felbontását a főosztály konstruktorában állítjuk be.

9. Az Update() metódus magát a játékciklust reprezentálja.