játékfejlesztés.hu
FórumGarázsprojectekCikkekSegédletekJf.hu versenyekKapcsolatokEgyebek
Legaktívabb fórumozók:
Asylum:    5471
FZoli:    4892
Kuz:    4455
gaborlabor:    4449
kicsy:    4304
TPG:    3402
monostoria:    3284
DMG:    3172
HomeGnome:    2919
Matzi:    2525

Pretender:    2498
szeki:    2440
Seeting:    2306
Geri:    2194
Orphy:    1893
Joga:    1791
Bacce:    1783
MaNiAc:    1735
ddbwo:    1654
syam:    1491
itamas - Tag | 106 hsz       Online status #212284   2018.12.17 10:16 GMT+1 óra  
Ja, értem már! Köszönöm ezt az információt is; most már megjegyeztem és hasznosítom.
   
Instalok - Tag | 580 hsz       Online status #212283   2018.12.16 20:07 GMT+1 óra  
Ha megnézed a lenti példakódot, amit írtam, ott van használatban
Kód:
img = new Image();
img.src = 'valami.jpg';
img.onload = function() {
    // ide jön a kód, ami akkor fusson, amikor betöltött a kép
}

   
itamas - Tag | 106 hsz       Online status #212282   2018.12.16 17:14 GMT+1 óra  
Köszönöm szépen a segítséget ehhez is, Instalok!
Tényleg úgy lett, ahogy írtad, vagyis hogy még nem töltődött be a kép, mert átraktam az átméretezés sorát egy későbbi gombnyomás eseményéhez, és így már rendesen átméretezi.
Az onload esemény használatát nem értem, bár utánanéztem a neten, de amit találtam róla, úgy csak egy fehér képernyőt eredményezett: a képbetöltést beraktam egy külön függvénybe, és a javascript kódok lefutása előtt a BODY tagot a következőképpen módosítottam:
Kód:
<body onload="kepbetoltes()">

A JS-en belül nem lehet az onload-ot egyszerűbben alkalmazni?
   
Instalok - Tag | 580 hsz       Online status #212281   2018.12.16 16:49 GMT+1 óra  
Ha elég nagy a kép, akkor nem tölt be azonnal, használd az onload eseményt.
Tehát amikor lekéred a szélességet, akkor lehet, h még nincs meg, mert nem töltött be a kép.

   
itamas - Tag | 106 hsz       Online status #212280   2018.12.16 12:41 GMT+1 óra  
Érdekes, hogy erre a műveletre:
Kód:
xmeret = (window.innerWidth/2)/window.innerWidth;
var kep = new Image();
kep.src = 'kepek/kep.png';
var xertek = kep.width*xmeret;

rendre 0-t ad eredményül az xertek változóba, pedig a kep.width értéke 525, az xmeret pedig 0.5, úgyhogy az eredménynek valahol 262 körül kellene lennie. Kerekíteni is próbáltam, de akkor is 0 jön ki neki.
   
itamas - Tag | 106 hsz       Online status #212279   2018.12.16 12:17 GMT+1 óra  
Igen, úgy jó lenne, ha a kirajzolási függvényben méretezném át, de annak egy csomó vonzata van más helyen is (pl. rákattintásnál még az eredeti képméret fog így is szerepelni).
Viszont rájöttem arra, hogy ha a következőképpen csinálom, úgy rendesen átméretezi; a lényeg, hogy a kirajzolófüggvénybe is be kell írni, hogy kep.width meg kep.height:
Kód:
var kep = new Image();
kep.src = 'kepek/kep.png';
kep.width = 250;
(...)
rv.drawImage(kep,a_kep.xhely,a_kep.yhely,kep.width,kep.height);

Egy bajom van, mégpedig az, hogy úgy látszik, konkrét számértéket kell beírni neki (most: 250), mert anélkül mindig 0 méretet adott a képnek, pl. így is:
Kód:
xmeret = (window.innerWidth/2)/window.innerWidth;
ymeret = (window.innerHeight/2)/window.innerHeight;
(...)
var kep = new Image();
kep.src = 'kepek/kep.png';
kep.width = kep.width*xmeret;

Ezt nem tudom, hogy miért van...
   
Instalok - Tag | 580 hsz       Online status #212278   2018.12.16 10:58 GMT+1 óra  
Ez továbbra is megoldható úgy, hogy a méretet a kirajzolásnál adod meg, lásd a lenti példakódot. A kép eredetileg ki tudja mekkora, kirajzoláskor viszont a (10,10) pozícióba rajzolom 200x200-as méretben.

Egyébként design szempontjából nem tudom mennyire jó ötlet felbontás alapján méretezni a képet, ki kell próbálni.

   
itamas - Tag | 106 hsz       Online status #212277   2018.12.15 14:22 GMT+1 óra  
Azért kellene a képeket átméreteznem, mert azt szeretném, hogy a játékos képernyőfelbontásától függetlenül ugyanakkora legyen minden számítógépen.
Tehát az xmeret és ymeret változókba kerül a méretezési arány, ami a képernyőfelbontás valahanyad része. A képek mostani állapotukban túl rosszul néznek ki elhelyezkedésileg a böngésző ablakában, mert elég nagyok. Ezeket a képeket kellene ugyanakkora arányban kicsinyíteni, mint ahogyan aránylik a teljes képernyőhöz mondjuk a harmada a képernyőnek.
Legalábbis ez volna az elgondolásom.
   
Instalok - Tag | 580 hsz       Online status #212276   2018.12.15 10:10 GMT+1 óra  
1. Miért akarod átméretezni a képet? Miért nem jó, ha csak simán kisebb méretben rajzolod ki? Ha jól tudom a width/height beállítása csak akkor érvényes, ha az egy valid html elementre mutat. Ha a contexttel rajzolod ki a képet, akkor rajzoláskor kell megadnod a méretét.
Kód:
<canvas id="myCanvas" width=800 height=600 style="border: 1px solid black;" />
<script>
window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var img = new Image();
    img.src = "image.jpg";

    img.onload = function() {
        ctx.drawImage(img, 10, 10, 200, 200);
    };
};
</script>


2. Megoldhatod úgy, hogy egy teljes képernyős fekete téglalapot kirajzolsz, aminek mondjuk 50%-os átlátszósága van (alpha/opacity = 0.5)

   
itamas - Tag | 106 hsz       Online status #212275   2018.12.15 09:55 GMT+1 óra  
Felbukkant még két kérdés:
1. hogyan lehet JS-ben a képeket betöltés után átméretezni? Mert ezt a kódot használom rá:
Kód:
xmeret = (window.innerWidth/2)/window.innerWidth;
ymeret = (window.innerHeight/2)/window.innerHeight;
var kep = new Image();
kep.src = 'kepek/kep.png';
kep.width *= xmeret;
kep.height *=ymeret;

és a képet ugyanakkora méretben jeleníti meg, bár ha kiíratom a méretét, az 0. Ugyanez van, ha megadok egy konkrét számot szélességnek és magasságnak.
2. lehetséges-e és ha igen, hogyan JS-ben játék közben bizonyos mértékben elsötétíteni a háttérben lévő képeket, mikor az előtérben más képeket mutatok? Mint amikor pl. felbukkan egy új ablak, és mögötte a nem aktív dolgok elsötétülnek.
   
itamas - Tag | 106 hsz       Online status #212248   2018.11.20 08:45 GMT+1 óra  

Ezt a hozzászólást itamas módosította (2018.11.21 12:51 GMT+1 óra, 27 nap)
   
itamas - Tag | 106 hsz       Online status #212234   2018.11.11 16:27 GMT+1 óra  
Küldtem neked az imént privát üzenetet a kérdéses fájllal. Ha időd s kedved van hozzá, belenézhetsz, hogy mi lehet az egérkezeléssel a hiba.
A Phaser-t ismerem régebbről, csak azt hittem, egyszerűbb és átláthatóbb így kódolni: elkezdtem sima Jegyzettömbbel, aztán jött a Notepad++. Gondoltam, ezekkel jobban "belelátok" abba, amit csinálok...
   
zeller - Törzstag | 486 hsz       Online status #212233   2018.11.11 09:54 GMT+1 óra  
Ne a window-ra hivd meg az addeventlistenert, hanem arra a peldanyra amire regisztralod. Nem tudom miert nem mukodik. Kulon file? Esetleg rossz sorrend.

A this kulcsszoval mindig az aktualis peldanyra hivatkozol, szoval ez igy helyes, de nem tudom JS-ben mi lehet switchben vizsgalva (van olyan nyelv ahol csak int vagy string) es azt se, hogy mive castolja a vizsgalathoz.

Egyebkent en azt javaslom, hogy ne kinozd magad ES5 szintaxisu javascripttel, es sajat engine-nel.
Ha a celod jatekkeszites akkor inkabb kezdj el egy engine-t vagy SDK-t hasznalni, pl ezt:
https://phaser.io/
Sokkal hamarabb celba ersz.

   
itamas - Tag | 106 hsz       Online status #212232   2018.11.11 09:02 GMT+1 óra  
Beírtam a javaslatod a billentyűkezeléshez hasonlóan (egyébként Notepad++-szal fejlesztek), de még valami nem stimmel.
Ha így használom:
Kód:
window.addEventListener("click", kattirnyilon, false);

akkor nem jelez hibát, de nem is csinál semmit kattintásra.
Ha viszont az addEventListener elé a window helyett a nyilak konstruktorát, vagyis Irnyil-t írok vagy éppen egy példányát a nyilaknak (felnyil, lenyil, balnyil vagy jobbnyil), akkor pl. "felnyil is not defined" hibaüzenet van a Chrome-ban (holott a felnyil-at és a másik 3 példányt globális változóként hozom létre, tehát nem a var kulcsszóval, úgyhogy elvileg mindenütt látszódnia kell).
Ezen kívül még azt nem értem, arra a kérdésre szeretnék választ, hogy van ugye a nyilaknak egy konstruktora, az Irnyil. Ebben vannak a képek, pl. ha az iránya 0, akkor:
Kód:
this.kepe = jobbranyilkep;

Namost ha rákattintok ennek egy példányára, pl. a jobbnyil objektumra, akkor ezen a
Kód:
switch (this.kepe)

szerkezettel helyesen és megfelelően le tudom-e kérdezni valamely tulajdonságát (most: a képét)? Vagy ez is hibás valamiért? Tehát a this.kepe-vel mindig az aktuális példányra hivatkozok?
   
zeller - Törzstag | 486 hsz       Online status #212231   2018.11.10 15:47 GMT+1 óra  
Az onclick egy eventhandler. Nem fogod meghivni, hanem az event loop hivja meg. Nem tudom milyen frameworkben fejlesztesz, de az alap DOM-os API-ban asszem igy lehet: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

szoval pl gomb.addEventListener("click", callbackFn)

   
itamas - Tag | 106 hsz       Online status #212229   2018.11.09 15:55 GMT+1 óra  
Még azt el tudná valaki magyarázni nekem, hogy az egérkezelés hogy működik a JavaScript-ben?
Azt szeretném elérni, hogy van négy darab négyirányba mutató nyilam, amikhez képek vannak hozzárendelve. S ha egy nyílra kattintunk, jöjjön létre az irányától függően tőle jobbra, balra, fenn vagy lenn egy másik kép. Azt tudom, hogy az onclick() függvény kezeli a gombnyomást egy objektumon, de ezt hol, micsodán és mikor kell hívni?
Tehát, adott egy tereptárgy objektum:
Kód:
function Tereptargy(xh,yh,kep) {
this.xhely = xh;
this.yhely = yh;
switch (kep) {
case 1: this.kepe = erdokep;
break;
case 2: this.kepe = folyokep;
break;
case 3: this.kepe = hegysegkep;
break;
case 4: this.kepe = mezokep;
break;
};
};

egy Irnyil objektum 4 példánnyal:
Kód:
function Irnyil(xh,yh,ir) {
this.xhely = xh;
this.yhely = yh;
this.irany = ir;
switch (ir) {
case 0: this.kepe = jobbranyilkep;
break;
case 90: this.kepe = felnyilkep;
break;
case 180: this.kepe = balranyilkep;
break;
case 270: this.kepe = lenyilkep;
break;
};
};

így csináltam neki 4 példányt:
Kód:
felnyil = new Irnyil(a_bunker.xhely+(bunkerkep.width/2)-(felnyilkep.width/2),a_bunker.yhely-felnyilkep.height,90);
lenyil = new Irnyil(a_bunker.xhely+(bunkerkep.width/2)-(felnyilkep.width/2),a_bunker.yhely+bunkerkep.height,270);
balnyil = new Irnyil(a_bunker.xhely-balranyilkep.width,a_bunker.yhely+(bunkerkep.height/2)-(balranyilkep.height/2),180);
jobbnyil = new Irnyil(a_bunker.xhely+bunkerkep.width,a_bunker.yhely+(bunkerkep.height/2)-(jobbranyilkep.height/2),0);

és a nyilakon való kattintás eseménye:
Kód:
function kattirnyilon() {
switch (this.kepe) {
case balranyilkep: tereptargyak.push(new Tereptargy(balranyilkep.xhely-erdokep.width,balranyilkep.yhely-(erdokep.height/2),1));
break;
case jobbranyilkep: tereptargyak.push(new Tereptargy(jobbranyilkep.width,jobbranyilkep.yhely-(folyokep.height/2),2));
break;
case felnyilkep: tereptargyak.push(new Tereptargy(felnyilkep.xhely-(hegysegkep.width/2),felnyilkep.yhely-(hegysegkep.height/2),3));
break;
case lenyilkep: tereptargyak.push(new Tereptargy(lenyilkep.xhely-(mezokep.width/2),lenyilkep.yhely+lenyilkep.height,4));
break;
};
};

De mindezek alapján hol kell használni az onclick()-et, hogy hívja és végrehajtsa a kattirnyilon() függvényt? Mert betettem a játékciklusba pl. hogy:
felnyil.onclick = kattirnyilon;
meg hogy:
Irnyil.onclick = kattirnyilon;
de egyikre sem csinál semmit. És eddigi hosszas böngészések után sem találtam sehol a neten valami megoldást... :-(
   
itamas - Tag | 106 hsz       Online status #212215   2018.10.29 13:51 GMT+1 óra  
Szia Instalok!
Elküldtem privát üzenetben a programom forráskódját, hogy ne szemeteljem itt tele a fórumot. Tegnap este már írni akartam, hogy ma küldeni fogom, de telefonon írtam, és hibát írt ki a fórum küldéskor (még kilépni sem tudtam).
Előre is köszönöm, ha időt szakítasz az átnézésére és a segítségre!
   
Instalok - Tag | 580 hsz       Online status #212214   2018.10.28 20:01 GMT+1 óra  
Kicsit nehezen olvasható így a kód, ráadásul nem is látszik, hogy hogy van meghívva. Egy pastebin teljes (vagy legalábbis releváns) kód talán jobb lenne, még jobb a "futtatható", hogy ki tudjuk próbálni.

   
itamas - Tag | 106 hsz       Online status #212212   2018.10.27 17:48 GMT+1 óra  
Na, ezt viszont nem értem, miért baj: a játékomban jobbról és balról jönnének be az ellenségek, és ha ütköznek egymással valahol a képernyő közepén, akkor megállás és váltsanak képet, kezdjenek harcolni, stb. stb.
De ha az utkelllel() függvény nincs kikommentelve, akkor az ellensegcselekszik() függvényben nem fut le a kirajzolás, pontosabban ezt a hibát kapom:
Uncaught TypeError: Cannot read property 'kepe' of undefined
Ha beadok egy konkrét képet, akkor ugyanez a hiba az xhely változóval, stb.
Így néz ki az ellensegcselekszik():
Kód:
function ellensegcselekszik() {
for (i = 0; i < ellensegtomb.length; i++) {
switch (ellensegtomb[i].mitcsinal) {
case "bejon":
if (ellensegtomb[i].iranya == 0) {
ellensegtomb[i].xhely += 4;
var utkeredmeny;
utkeredmeny = utkelllel(i,ellensegtomb[i].xhely+((ellensegtomb[i].kepe.width)*2),ellensegtomb[i].yhely);
if ( utkeredmeny == 1 ) {
ellensegtomb[i].mitcsinal = "harcol";
ellensegtomb[i].kepe = cdkepe;
};
}
else
{
ellensegtomb[i].xhely -= 4;
var utkeredmeny;
utkeredmeny = utkelllel(i,ellensegtomb[i].xhely-((ellensegtomb[i].kepe.width)*2),ellensegtomb[i].yhely);
if ( utkeredmeny == 1 ) {
ellensegtomb[i].mitcsinal = "harcol";
ellensegtomb[i].kepe = cdkepe;
};
};
break;
};
rv.drawImage(ellensegtomb[i].kepe,ellensegtomb[i].xhely,ellensegtomb[i].yhely);
};
};

Így pedig az utkelllel():
Kód:
function utkelllel(ez,ittx,itty) {
/*for (i = 0; i < ellensegtomb.length; i++) {
if (ittx >= ellensegtomb[i].xhely && ittx <= ellensegtomb[i].xhely+(ellensegtomb[i].kepe).width && itty >= ellensegtomb[i].yhely && itty <= ellensegtomb[i].yhely+(ellensegtomb[i].kepe).height) {
return 1;
}
};*/
for (i = 0; i < ellensegtomb.length; i++) {
if (ittx < ellensegtomb[i].xhely + (ellensegtomb[i].kepe).width &&
ittx + (ellensegtomb[ez].kepe).width > ellensegtomb[i].xhely &&
itty < ellensegtomb[i].yhely + (ellensegtomb[i].kepe).height &&
(ellensegtomb[ez].kepe).height + itty > ellensegtomb[i].yhely) {
return 1
};
};
return 0;
};

Ha nincs ez az utóbbi ütközésellenőrzés, akkor minden oké - leszámítva, hogy megállás nélkül menetelnek tovább a figurák, márpedig nem az kéne.
   
itamas - Tag | 106 hsz       Online status #212207   2018.10.23 09:31 GMT+1 óra  
Hű, nagyon szépen köszönöm a segítségedet, Instalok! A kis programom most már működik; leírásod alapján a következő módosítást csináltam az adott kódrészleten:
Kód:
setInterval(frissites, 40);
function frissites() {
ctx.clearRect(0,0,canvas.width,canvas.height);
for (i = 0; i < kistvtomb.length; i++) {
ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50); //kicsi képek a saját koordinátájukra
};
ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);  //kirajzoljuk a nagy képet a képernyő közepére
};

valamint előtte pár sorral, hogy a nagy kép ne jelenjen meg a vásznon kívül:
Kód:
var tvkepe = new Image();
tvkepe.src = 'kepek/viditv.jpg';

Kicsit még furcsa mindez nekem, de remélem jó alap lesz az elinduláshoz, hogy egyszerűbb böngészős játékokat készítsek.
   
Instalok - Tag | 580 hsz       Online status #212206   2018.10.22 18:21 GMT+1 óra  
Az eredeti kódodban a nagy kép nem a canvason jelent meg, hanem a html kódban lévő <img> tag miatt. Ezért is adtam hozzá a vászonhoz egy keretet, így láthatod, hogy hol helyezkedik el. Ha a <head>-ben lévő <style> taget hozzáadod az eredeti kódodhoz, akkor láthatod majd, hogy megjelenik az üres canvas, és mellette a kép.

A kirajzolás koordinátái a kép bal felső sarkát adják meg. Ha a kép közepét akarod elhelyezni egy (x,y) helyre, akkor (x-képszélesség/2, y-képmagasság/2) koordinátákba kell kirajzolnod a képet.

Az onload esemény csak egyszer hívódik meg, így utána hiába írod felül a koordinátákat, az a kép már ki van rajzolva az adott pozícióba, adott mérettel. Tehát nagyjából annyi történik, hogy:
- betöltődik az ablak => meghívja az onload eseményt
- létrehozod az objektumokat, beállítod az értékeit, stb.
- kiadod az utasítást a kép betöltésére
- betöltődik a kép => meghívódik a képhez rendelt onload esemény
- ekkor kirajzolod a képet
- ezek után, ha felülírod az értékeket, semmi sem rajzolja újra a képet.

Két lehetőséged van, mindkettőhöz érdemes magát a kirajzolást egy saját függvényben elhelyezni.
- vagy minden eseményre újrarajzolod a képeket
- vagy beállítod, hogy a "render" függvényed bizonyos időközönként automatikusan meghívódjon, pl. window.setInterval() segítségével: https://www.w3schools.com/jsref/met_win_setinterval.asp

Annyit érdemes ehhez hozzátenni, hogy attól, hogy újrarajzolod a képeket, a régiek még nem tűnnek el, szóval valahogy érdemes "kitakarítani" a canvast. Ezt a fantáziádra bízom.

   
itamas - Tag | 106 hsz       Online status #212204   2018.10.22 14:23 GMT+1 óra  
Aha. Szóval az onload használatát mindenképpen megköveteli a kirajzolás. Most már nekem is jó; köszönöm szépen a segítségedet.
Még két kérdéssel szeretnélek egy picit feltartani:
1. érdekes módon ha az onload-ot nem használom - ahogy te is láthatod a kódban - a nagy kép kirajzolásánál, attól az még kirajzolódik, bár nem teljesen a vászon közepére. Ez miért lehet? (Persze jó nekem, hogy ez kirajzolódik, csak megkavar, hogy akkor az az onload nélkül miért van?)
2. beszúrtam ezt a kódot a két for ciklus közé, hogy lehessen mozgatni a 0. elemű példányt a tömbben, de valamiért le se bagóz engem, nem mozog. A kód maga jó lehet, mert kipróbáltam a case ágakat egy szövegkiírással is, de maguk a kistvtomb[0].xhely és kistvtomb[0].yhely koordináták (látszólag?) nem változnak. Ezek szerint nem jól hivatkozok rájuk értékadásnál, vagy mi lehet a gond, amiért nem mozdulnak el gombnyomásra?
Kód:
window.addEventListener("keydown", gombnyomas, false);
function gombnyomas (gomb) {
switch ( gomb.keyCode ) {
case 38: kistvtomb[0].yhely -= 4; break;
case 37: kistvtomb[0].xhely -= 4; break;
case 39: kistvtomb[0].xhely += 4; break;
case 40: kistvtomb[0].yhely += 4; break;
};
};

És még egy pótkérdésem ehhez, hogy gombnyomáskezeléshez létezik egyszerűbb módszer JavaScriptben, ami nem használja az addEventListener() függvényt? Mert úgy olvasom, ezt a régebbi böngészők nem támogatják.
   
Instalok - Tag | 580 hsz       Online status #212203   2018.10.22 10:52 GMT+1 óra  
Kód:
<html>
    <head>
        <title>Képek</title>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id="rajzvaszon" width="500" height="500"></canvas>
        <img id="tv_kepe" src='https://brain-images-ssl.cdn.dixons.com/4/9/10161494/l_10161494_002.jpg'>
        <script>
        window.onload = function() {
            var canvas = document.getElementById('rajzvaszon');
            var ctx = canvas.getContext('2d');
            var tvkepe = document.getElementById("tv_kepe");
           
            function Kistv() {
                this.xhely=Math.round(Math.random()*400);
                this.yhely=Math.round(Math.random()*400);
            };
           
            var kistvtomb = [];
            for (i = 0; i < 5; i++) {
                kistvtomb.push(new Kistv());
            };
           
            for (i = 0; i < kistvtomb.length; i++) {
                ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50);
            }

            ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);
        }
        </script>
    </body>
</html>

avagy...
Kód:
<html>
    <head>
        <title>Képek</title>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id="rajzvaszon" width="500" height="500"></canvas>
        <script>
        window.onload = function() {
            var canvas = document.getElementById('rajzvaszon');
            var ctx = canvas.getContext('2d');

            // létrehozunk egy új képet, aminek beállítjuk, hogy mit töltsön be
            var tvkepe = new Image();
            tvkepe.src = 'https://brain-images-ssl.cdn.dixons.com/4/9/10161494/l_10161494_002.jpg';
           
            function Kistv() {
                this.xhely=Math.round(Math.random()*400);
                this.yhely=Math.round(Math.random()*400);
            };
           
            var kistvtomb = [];
            for (i = 0; i < 5; i++) {
                kistvtomb.push(new Kistv());
            };
           
            // amikor betöltött a kép, akkor rajzoljuk ki
            tvkepe.onload = function() {
                for (i = 0; i < kistvtomb.length; i++) {
                    ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50);
                }

                ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);
            }
        }
        </script>
    </body>
</html>

   
itamas - Tag | 106 hsz       Online status #212202   2018.10.21 10:00 GMT+1 óra  
Köszi a választ, Instalok, de valami még nem jó. Az általad leírtak alapján ilyenné alakítottam a kódot:
Kód:
<html>
<head>
<title>Képek</title>
</head>
<body>
<canvas id="rajzvaszon" width="500" height="500"></canvas>
<img id="tv_kepe" src='kepek/viditv.jpg'>
<script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var tvkepe = document.getElementById("tv_kepe");
function Kistv() { //A konstruktor
this.xhely=Math.round(Math.random()*400);
this.yhely=Math.round(Math.random()*400);
};
var kistvtomb = [];
for (i = 0; i < 5; i++) { //egy példány létrehozása a Kistv objektumból
kistvtomb.push(new Kistv());
};
for (i = 0; i < kistvtomb.length; i++) {
ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50); //kicsi képek a saját koordinátájukra - ez NEM OKÉ!
}
ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);  //kirajzoljuk a nagy képet a képernyő közepére - ez oké.
</script>
</body>
</html>

Meg még az lenne a kérdésem, hogy az objektumok megsemmisítése hogyan működik JS-ben? Legyen mindegyiknek egy "letezik" vagy hasonló nevű változója, és ezt állítgassam igazra meg hamisra, vagy amolyan C#-osan lehet "null" vagy ilyesmi értéket hozzájuk rendelni, és így eltünteni a már szükségtelen objektumpéldányokat?

Ezt a hozzászólást itamas módosította (2018.10.21 13:12 GMT+1 óra, 58 nap)
   
Instalok - Tag | 580 hsz       Online status #212201   2018.10.20 23:15 GMT+1 óra  
Nem tudom, h csak rész-kódot adtál-e meg, de:
- hiányzik a <head> és <body> tag
- érdemes az egész JS kódot valamilyen esemény alá berakni (főleg, ha külön js file, és a head-ben húzod be), például window.onload
- function Kistv(xhely,yhely) - itt bekérsz 2 paramétert, amit aztán nem használsz fel
- nem muszáj létező html img taget felhasználni, be is tudod tölteni a képet, és azt kirajzolni: http://www.williammalone.com/briefs/how-to-draw-image-html5-canvas/
- a kistvtomb.push egy függvény, tehát kistvtomb.push(...) formában írandó.

Az általad megadott kód enyhén javított változata:
Kód:
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var tvkepe = document.getElementById("tv_kepe");

function Kistv() { //A konstruktor
    this.xhely=Math.round(random()*400);
    this.yhely=Math.round(random()*400);
};

kistvdb = 0;
var kistvtomb = [];
while ( kistvdb < 5 ) { // ez lehetne for ciklus is
    kistvtomb.push(new Kistv());
    kistvdb += 1;
};

for (i = 0; i < kistvtomb.length; i++) {
    ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50);
}
ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);

Nem azt mondom, hogy így érdemes csinálni, de ennek már mennie kell. Nagyjából.

Illetve ajánlom figyelmedbe a Chrome F12-vel elérhető kis sidebarját, azon belül is főleg a console-t.

   
itamas - Tag | 106 hsz       Online status #212200   2018.10.20 16:09 GMT+1 óra  
Sziasztok! Nemrég hozzáfogtam a JavaScript tanulásához, de elakadtam azzal a problémával, hogy egy objektum több példányát összegyűjtsem egy tömbbe és azok alapján kirakjam azokat. Szerintem ez így nem nagyon érthető, de a kódom talán beszédesebb lesz arról, hogy mi kéne, mi nem működik (én most túl fáradt vagyok a gépeléshez, mert egész nap a Javascriptes honlapokat bújtam, de úgy látszik az én logikám még nem kompatibilis a JS-ével...).
Kód:
<html>
<title>Képek</title>
<canvas id="rajzvaszon" width="500" height="500"></canvas>
<img id="tv_kepe" src='kepek/viditv.jpg'>
<script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var tvkepe = document.getElementById("tv_kepe");
function Kistv(xhely,yhely) { //A konstruktor
this.xhely=Math.round(random()*400);
this.yhely=Math.round(random()*400);
};
kistvdb = 0;
var kistvtomb = [];
while ( kistvdb < 5 ) { //egy példány létrehozása a Kistv objektumból
kistvtomb.push = new Kistv(Math.round(random()*400),Math.round(random()*400));
kistvdb += 1;
};
for (i = 0; i < kistvtomb.length-1; i++) {
ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50); //kicsi képek a saját koordinátájukra - EZ NEM OKÉ!
}
ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);  //kirajzoljuk a nagy képet a képernyő közepére - ez oké.
</script>
</html>
   
Instalok - Tag | 580 hsz       Online status #211758   2017.12.31 10:09 GMT+1 óra  
Igazán nincs mit, és BÚÉK előre is!

   
full3nzo - Tag | 48 hsz       Online status #211757   2017.12.31 10:07 GMT+1 óra  
Ezer köszönet!

   
Instalok - Tag | 580 hsz       Online status #211756   2017.12.31 10:06 GMT+1 óra  
full3nzo - Tag | 48 hsz       Online status #211755   2017.12.31 09:52 GMT+1 óra  
Sziasztok!

PHP / MySQL -> valaki tud olyan módszert ami egy scriptben kiválaszt táblából adott számú elemet, rendezve és legmagasabb értékkel? A választ köszönöm előre is.

Még 13 óra és 10 perc Újévig - BUÉK mindenkinek:

   
Katalin - Tag | 5 hsz       Online status #195410   2013.06.25 11:47 GMT+1 óra  
köszi, megnézem

   
syam - Törzstag | 1491 hsz       Online status #195404   2013.06.25 09:17 GMT+1 óra  
Az eltének van egy lua oktató oldala.
Nincs kizárva, h oktatják is
alias aalberik
   
Katalin - Tag | 5 hsz       Online status #195403   2013.06.25 09:12 GMT+1 óra  
Sziasztok!

Hol lehet idehaza LUA scriptet tanulni?

   
Parallax - Tag | 603 hsz       Online status #164847   2011.09.22 09:57 GMT+1 óra  
Pretender: Ehhez már fordítóprogramot kell fejleszteni. Egyszerű esetben nem olyan nehéz, de elég mély a téma. Lexer, parser, interpreter. A suliban majd fogsz róla tanulni és egy egyszerűbb elemzéssel meg is valósítani egy kis nyelvecskét talán az ANTLR közbeiktatásával, ami már a lexer és parser-t meg is oldja helyetted.

Syam: Én olyasmire gondolok, hogy írom a rendszert, persze alapos tervezés után és menet közben integrálgatom a scriptet, tesztelek. Valamennyire időtálló, sőt 1-1 alrendszer nem is nagyon változna később. Csak mivel mindent magamnak írok, nem biztos, hogy megéri és összességében nem biztos, hogy gyorsabb a fejlesztés, ha a teljes játéklogikát scriptelem, mintha C++ ban írnám, de minden kis fingnyi változtatás után fordítás lenne.

Itt ahogy olvastam mindenki oda van a scriptől, meg vissza, akkor is ha saját motort fejleszt.
Szerk.: Jövőre indítok ilyen projectet, ha mást nem majd én számolok be, hogy mennyire éri meg.

Ezt a hozzászólást Parallax módosította (2011.09.22 11:11 GMT+1 óra, ---)

   
Pretender - Törzstag | 2498 hsz       Online status #164846   2011.09.22 09:52 GMT+1 óra  
Én erről nem is tudok sokat... anno úgy oldottam meg a "scriptelést", hogy szövegesen beolvastam a parancsot, meg a paramétereket, és külön-külön lehetett minden egyes parancshoz rendelni egy konvertálós és végrehajtó függvényt.
Pl. volt az a parancsom, hogy
Kód:
player_spawn(0,0,0,5);

Abból beolvastam, hogy command = player_spawn, parameters[] = "0", "0", "0", "5"
Volt egy dictionary-m is, ami megadta, hogy mit kell hívni az adott parancs esetén. Meghívtam azt a két függvényt
Kód:
void A()
{
    x = StringHelper::ToFloat(parameters[0]);
    //...
}
void B()
{
    player->Spawn(x,y,z,angle);
}


Node kizárt, hogy ezt így szokták (így pl. minden egyes parancshoz írni kell két függvényt, változókat eltárolni, stb.), szóval hogy érdemes ilyet írni?

   
syam - Törzstag | 1491 hsz       Online status #164844   2011.09.22 09:43 GMT+1 óra  
Szerintem ez attól függ, h az engine egy vagy több játékra lesz tervezve.
Utóbbi esetben az engine-t gyaklag csak modolja az ember amihez pedig minél nagyobb szabadság kell, amit a script tud (csak) nyújtani az engine átírása nélkül.

Viszont utólag megírni a script bind interface-t az egy halál...
alias aalberik
   
Parallax - Tag | 603 hsz       Online status #164842   2011.09.22 09:38 GMT+1 óra  
Idézet
Parallax :
Idézet
barack1 :
Kész engine-t nem is nehéz scriptelgetni, a finom feladat az, amikor magadnak írsz mindent.


Annak azért már nem sok köze van a scripteléshez.


Akkor talán itt jobb helye van ennek a problémának. Engem érdekelne másoknak mi a tapasztalata. Megéri e a script integrálással való munkát (binding, felület írás) az a gyakorlatilag egyetlen előny, hogy gyorsabb játék logikát írni, vagy engine-t tesztelni? Ez arra az esetre vonatkozik, ha kis csapat van pár fő, vagy csak 1-2 programozó.

   
TPG - Tag | 3402 hsz       Online status #92313   2008.07.12 08:31 GMT+1 óra  
Idézet
dvorgaz :
LuaBind-nál a függvények importálásához/script futtatásához kell ugy egy ilyen:

Kód:
  // Create a new lua state
  lua_State *myLuaState = lua_open();

  // Connect LuaBind to this lua state
  luabind::open(myLuaState);

  // do stuff...

  lua_close(myLuaState);


Ezt minden alkalommal el kell játszani mikor scriptet futtatok, vagy mondjuk a program elején létrehozom ezt a luastate-et meg exportálok c++ függvényeket, aztán majd kilépéskor meghívom a lua_close()-t?


Én utóbbit csinálom, de szerintem létezhet olyan eset mikor az előbbi is hasznos lehet.
Reality is almost always wrong. - House

   
dvorgaz - Törzstag | 576 hsz       Online status #92297   2008.07.12 04:15 GMT+1 óra  
LuaBind-nál a függvények importálásához/script futtatásához kell ugy egy ilyen:

Kód:
  // Create a new lua state
  lua_State *myLuaState = lua_open();

  // Connect LuaBind to this lua state
  luabind::open(myLuaState);

  // do stuff...

  lua_close(myLuaState);


Ezt minden alkalommal el kell játszani mikor scriptet futtatok, vagy mondjuk a program elején létrehozom ezt a luastate-et meg exportálok c++ függvényeket, aztán majd kilépéskor meghívom a lua_close()-t?
   
TPG - Tag | 3402 hsz       Online status #91354   2008.07.03 14:30 GMT+1 óra  
Az ilyesmi policy függő, abban az esetben amit írtál emlékeim szerint a copy az alap policy. A policy-kről itt olvashatsz.
Reality is almost always wrong. - House

   
dvorgaz - Törzstag | 576 hsz       Online status #91348   2008.07.03 13:14 GMT+1 óra  
Hello, bekötöttem egy MyResourceManager nevű (ResourceManager típusú) objektumot Luába LuaBind-dal:

Kód:
// Assign MyResourceManager to a global in lua
luabind::globals(myLuaState)["MyResourceManager"] = &MyResourceManager;


Ilyenkor tényleg cím szerint adja át a scriptnek (tehát nem jönt létre belőle másolat), vagy bemásolja valahova a scriptbe is? Pl. mennyire hatékony, ha nagy mennyiségű adatot szeretnék így átnyomni a scriptnek?
Azt próbálgattam, hogy bekötés után változtatgattam az objektum egy tagváltozóját C++ból és scriptből is, és mindíg "szinkronban" voltak a scriptbeli és kódbeli változók, de nem egyértelmű, hogy ez amiatt van-e, hogy pointerrel lett átadva, vagy azért mert külön szinkronizálja őket.
   
twilek - Tag | 144 hsz       Online status #89975   2008.06.20 10:08 GMT+1 óra  
Ez is szin ... de ugye Red Green Blue Alpha ... nahh de az utolso az alpha? vagy az elso? (kozepre enm szoktak tenni ))
ezert jo ha leirod, mert ezt egybol nem fogod tudni ... amelett van ahol nem RGB-t kernek, hanem BGR-t ... szoval )))
-=[ TwILeK ]=-
http://www.twilek.hu
   
fpeti - Törzstag | 1295 hsz       Online status #89928   2008.06.19 15:48 GMT+1 óra  
Idézet
twilek :
haaat

akkor ez vajon mit jelenthet? lamp0001={1, 1, 1, 0}
? ))



Ez így nem ér, a színnél könnyebb 3 számot beazonosítani! (way túúúúl sarkos a példád)
   
twilek - Tag | 144 hsz       Online status #89927   2008.06.19 15:39 GMT+1 óra  
Pedig en tenyleg javaslom ... de valo igaz, hogy draga. 100$ = 18.000 huf (kb )) ez a dolog bosegesen meger ennyit .. tenyleg nagyon nagyon hasznos ...
ami nagyon jo benne:
alt+shift+g -> feljon egy ablak, ami a projectben talalhato osszes filet tartalmaza, ahogy gepelsz ugy szuri a listat, enterre a fjalhoz ugrik
alt+m -> lenyilik egy ablak, a fajlban levo fuggvenyekkel, gepelsz, szur, enter oda ugrik
alt+g -> valtas header es cpp kozott / ujabb verzioban mar inl -t is kezel

a faj llistahoz hasonloan van fuggveny lista is egesz soulution ben ... refeneciak, hivas listak, minden .. renegeteg nagyon hasznos funkcioja van, amibol mar az elso 3 miatt erdemes )))

szoval nagyon nagyon nagyszeru kis tool .. a code complite rol nem is beszelve ...
beirsz neki .. pl:
for ENTER
for( ITT A KURZOR )
{

}

switchre, exception re .. de te bovitheted alistat ... elkepeszto ..
Nahh de ez nem a reklam helye, bocsi, tobbet nem irok
-=[ TwILeK ]=-
http://www.twilek.hu
   
TPG - Tag | 3402 hsz       Online status #89924   2008.06.19 15:30 GMT+1 óra  
Idézet
fpeti :
Nekem a VS intellisense bőven elég.. de az mondjuk nem ennyire szép színes


Nézd csak végig a feature listát. Én konkrétan lementem hídba mikor megláttam a cuccot egy videón működésközben. Előtte a VC#-ra irigykedtem mert baromi gyorsan és kényelmesen lehetett a fejlesztőkörnyezet miatt dolgozni benne, de az a VA-hoz képest vicc. Ezért nem merem a trialt kipróbálni.
Reality is almost always wrong. - House

   
twilek - Tag | 144 hsz       Online status #89922   2008.06.19 15:23 GMT+1 óra  
haaat

akkor ez vajon mit jelenthet? lamp0001={1, 1, 1, 0}
? ))
-=[ TwILeK ]=-
http://www.twilek.hu
   
twilek - Tag | 144 hsz       Online status #89919   2008.06.19 15:21 GMT+1 óra  
A visual assist sokkal tobb mint az intelisens
nem csak kodot szinez, de fajl megnyitasban is sokat segit .. header / cpp / inl valtasban, fuggvenyhez ugrasban .. a fejlesztest kb 10% al gyorsitja ..

De valo igaz, abszolute fuggoseget okoz!!!! ahol nincs VS ott konkretan mar alig tudok dolgozni ... (((
-=[ TwILeK ]=-
http://www.twilek.hu
   
fpeti - Törzstag | 1295 hsz       Online status #89917   2008.06.19 15:19 GMT+1 óra  
Nekem a VS intellisense bőven elég.. de az mondjuk nem ennyire szép színes
   
TPG - Tag | 3402 hsz       Online status #89914   2008.06.19 14:56 GMT+1 óra  
Idézet
fpeti :
ps:
a "Hasznalj Visual Assistot a C/C++ kodokhoz" azt jelentené, hogy ne notepad-ben írjjam be a VC8-nak a kódot? - húú, ettől nem kell félni, olyan elvetemült azért még nem vagyok

Üdv.


Sztem a Visual Assist alatt ez volt értve. Már évek óta nézegetem de még nem volt rá felesleges 100 dollárom, a trialt meg nem merem letölteni mert könnyen megeshet hogy függőséget okoz és akkor le kellene warezolnom amit meg nem szeretnék.
Reality is almost always wrong. - House

   
fpeti - Törzstag | 1295 hsz       Online status #89912   2008.06.19 14:48 GMT+1 óra  
Deeee neeeem,
a programozó nem gépel fölöslegesen, főleg, ha nem muszáj -szerintem.
Tehát nem azt írtam, hogy nem akarok, vagy nem szeretek, csak "fölöslegesen gépelni" nem szeretek, az egyik alapigazság: a jó programozó lusta - itt megint nem arról van szó, hogy nem csinál semmit, hanem, hogy fölöslegesen nem dolgozik, de nem kell ezt magyaráznom.
Egyébként meg egy színmegadásnál mit is jelenthetne 3 szám, mint rgb? (néha jelenthetne gbr-t is, de ehhez elég izének kell lenni. )
Teljesen egyetértek a szabatos-kódolással, én pl sokat kommentelek a kódban.
Ha belegondolok, hogy pályánként x1000 lámpánál kell begépelni, extra sorokat, elég rossz lesz, azon kívül a fileméret is növeXik.

Nem tudjátok ám (méég), micsoda 'super' kis rendszerem van a' egészre, de leírom, le én:
- van egy pályaszerkesztőcském, nem tud sokat, objektumokat lehet vele pakolgatni, meg lehet írni bármelyiknek scriptet, amit egy kis ablakba lehet beírni, na ott alapból kiesik minden syntax-help, mert az egy sima textbox.
Na itt nem kéne túlgépelni magunkat, valami ilyesmiként kell beírni a Kriptet:
Kód:
name lamp001
@.type = 2; -- bulb
@.dist = 80
@.color={1,1,0}

minden objektumhoz külön scriptrész kapcsolódik, ezek nem egy lua fileban vannak, hanem a pályaleíró binárisban, a többi objektadattal együtt.

Amikor eljő' az engine ideje, akkor fogja a pálya-filet, megkeresi az összes scriptet, és feldolgozza úgy, hogy a @-k helyére behelyettesíti a 'name' paraméretét, és ezt kiírja a tábladefininícióval egy temp .lua fileba (tegnap megtudtam, hogy nem muszáj fileba, a luaL_loadbuffer()-rel is lehet karaktertömbből! - majd)

Ezt szépen átadja a luanak, ami compilálja, az objektumok meg a neveik alapján lekérik a lua-tól az adataikat - esetünkben ez egy point-light fényforrás - és tádám, lő a világosság
- ebből körvonalazódhat a lua-rendszerem, most csinálom éppen a másik felét, nem a legprofibb megoldás fényenként begépelni - de 2100 előtt akarék már egy futtatható exe-t a kisközönség elé présente.. szóval értitek, nem élünk örökké, sietünk, még ha nem is látszik

Szvsz bármilyen birkatürelmű szkriptert kiborítana, ha @.color = {1,1,0} helyett mindíg
lamp001.red = 1
lamp001.green = 1
lamp001.blue = 0
sorokat kéne beírnia... sokkal tovább tart, de amúgy minden igaz, amit leírtál.

ps:
a "Hasznalj Visual Assistot a C/C++ kodokhoz" azt jelentené, hogy ne notepad-ben írjjam be a VC8-nak a kódot? - húú, ettől nem kell félni, olyan elvetemült azért még nem vagyok

Üdv.