The Tech Labs just published my 3D Sliding Puzzle tutorial.

“Flash Platform is a great tool to create games, either for internet or mobile content. With the introduction of Flash 3D Engines, the ability and success of creating flash games is even bigger. In this tutorial we are going to build up a simple sliding puzzle. Puzzle images are dynamically loaded and sliced so you can easily use your own images if you like. Learn, try and leave a comment showing your results.”

If you’re interested in making a simple interactive puzzle game with Flex go check the tutorial . Have fun.

shape.zip

Tässä yksi tapa. Alla koodi yksinkertaisimmillaan.

function ballPos(mc:MovieClip, xp:Number):Void
{
mc._x = xp;
var yp = 0;
do
{
yp++;
}
while(!mLine.hitTest(xp, yp, true));
mc._y = yp;
updateAfterEvent();
}

Katso esimerkki: Follow the Path | FLA

Ja vielä koodi kokonaisuudessaan:

mBall.onMouseMove = function():Void
{
// tarkistetaan, että ollaan rajatulla alueella
if(isInside())
{
ballPos(mBall, _root._xmouse);
}
}
 
function ballPos(mc:MovieClip, xp:Number):Void
{
// pallon x on sama kuin hiiren x
mc._x = xp;
// aloitetaan oikean paikan haku pystysuunnassa
var yp = 0;
do
{
yp++;
}
// suoritetaan lisäys kunnes saavutetaan muoto
while(!mLine.hitTest(xp, yp, true));
// asetetaan pallon koordinaatti
mc._y = yp;
updateAfterEvent();
}
 
// alustetaan pallon paikka
ballPos(mBall, mBall._x);
 
// alueen tarkistus
function isInside():Boolean
{
var xp = _root._xmouse;
if(xp < 0 || xp > Stage.width) return false;
return true;
}

Pallon x on siis koko ajan sama kuin hiiren x. Y:n arvo saadaan selville hitTestillä. Aloitetaan y-koordinaatista 0 ja lisäätään y:n arvoa while-loopissa joka “kierroksella” yhdellä. Kun while lauseen hitTest palauttaa arvon tosi, ollaan saavutettu muodon pinta ja päivitetään pallon y-koordinaatti. Olennaista on myös huomata, että kolmannen parametrin tulee olla true, koska haluamme testata osuman itse varsinaisen muodon kanssa (BoundingBoxin sijaan).

Katso valmis esimerkki  |   Lataa työtiedosto koneellesi

Kuvankäsittelyohjelmista tuttu väripaletti. Tällä esimerkkitiedoston paletilla ei tietysti ole varsinaista funktiota, mutta sen avulla voi tutustua muutamiin Color-luokan ominaisuuksiin ja metodeihin. Color-luokan avulla on helppo toteuttaa Flash-esityksiin dynaamisia efektejä kuten seuraavassa muunnoksessa.

ColorTransform- esimerkki

Katso valmis esimerkki  |   Lataa työtiedosto koneellesi

Kaikki varmasti tietävät (ovat ainakin kuulleet) pelin, jossa pitää pujotella rautalangasta väännetyn sokkeloisen radan läpi. Pujottelu itse tapahtuu niinikään rautalangasta tehdyllä “sauvalla”, jonka toisessa päässä on umpinainen lenkki. Peli on tehty niin, että varsinainen rata on umpinaisen lenkin sisällä ja mikä parasta, siinä kulkee virta. Jos lenkki siis osuu vahingossa rataan, saa pienen sähköiskun. Pienestä varauksestaan huolimatta yksi kerta riitti minulle.

Samankaltaisen pelin voi helposti tehdä Flashilla, lukuunottamatta tietenkin rautalankaa ja siinä kiertävää virtaa. Pelin tekeminen ei vaadi pelkistetynä montaa riviä koodia, mutta olen tähän versioon lisännyt ekstraominaisuutena hiiren liikkeiden mukaan piirtyvän viivan. Ei muuta kuin testaamaan.

Katso valmis esimerkki  |   Lataa työtiedosto koneellesi

Ei vastustajia, ei top-listaa, ei aikarajaa, no nothing. Pelkkää räisikintää vailla määränpäätä. Eli aika tylsää. “Toimivan” version tekemiseen sinun täytyy vaivata hieman omaa päätäsi.

Pienellä muokkauksella pelistä saa hiukan mielenkiintoisemman.

Space Battle