mboost-dp1
Logik bag chat system 2D/3D
Hej folkens.
Da jeg i tidernes morgen startede med at kode, var det enlig fordi det skulle ende ud med en 3D chat i sidste ende. Har dog aldrig fået taget mig sammen til at begynde på det. selvom jeg efterhånden har været igang med at kode i små 6-8 år.
Jeg har meget godt fat i HTML/CSS/PHP/MysQl, Derudover kan jeg også godt kode Javascript og Ajax på middelt niveau.
Nu har jeg endelig tiden til at gå igang, og gå på modet til det.
Jeg har tænkt over det længere tid, men kan enlig ikke rigtige finde ud af hvordan sådan en skal opbygges.
Det er her jeg tænker i måske kunne hjælpe mig. Det jeg søger er enlig bare den "logiske" forklaring på det, altså ikke en kode eller noget som helst. bare "funktionen" bag det, i dagligt tale.
Det jeg godt kunne tænke mig at vide er enlig bare hvordan man laver "ryk" systemet. Sådan at man kan rykke sin "figur" rundt.
Håber nogle af jer kan komme med nogle gode inputs, så jeg kan komme godt igang. Hvis i ved meget om det, så ville jeg da være glad hvis i evt kunne fortælle mig hvilke funktion i det gældende sprog som er optimale at opbygge det om, men ellers bare logikken bag det.
Håber i forstår hvad jeg mener, på forhånd tak og godaften :=)
Da jeg i tidernes morgen startede med at kode, var det enlig fordi det skulle ende ud med en 3D chat i sidste ende. Har dog aldrig fået taget mig sammen til at begynde på det. selvom jeg efterhånden har været igang med at kode i små 6-8 år.
Jeg har meget godt fat i HTML/CSS/PHP/MysQl, Derudover kan jeg også godt kode Javascript og Ajax på middelt niveau.
Nu har jeg endelig tiden til at gå igang, og gå på modet til det.
Jeg har tænkt over det længere tid, men kan enlig ikke rigtige finde ud af hvordan sådan en skal opbygges.
Det er her jeg tænker i måske kunne hjælpe mig. Det jeg søger er enlig bare den "logiske" forklaring på det, altså ikke en kode eller noget som helst. bare "funktionen" bag det, i dagligt tale.
Det jeg godt kunne tænke mig at vide er enlig bare hvordan man laver "ryk" systemet. Sådan at man kan rykke sin "figur" rundt.
Håber nogle af jer kan komme med nogle gode inputs, så jeg kan komme godt igang. Hvis i ved meget om det, så ville jeg da være glad hvis i evt kunne fortælle mig hvilke funktion i det gældende sprog som er optimale at opbygge det om, men ellers bare logikken bag det.
Håber i forstår hvad jeg mener, på forhånd tak og godaften :=)
Jeg synes i er meget dårlige til at undgå særskrivninger her på newz.dk. Det hedder »chat-system«, ikke »chat system«, »3D-chat«, ikke »3D chat«.
Læs mere her: https://da.wikipedia.org/wiki/Særskrivning
Læs mere her: https://da.wikipedia.org/wiki/Særskrivning
Det er meget underligt, at newz.dk-communityet laver så mange særskrivninger i forhold til andre communities. Selv udvikleren/udviklerne kan ikke finde ud af det. F.eks. står der »spil vurderinger« (hvilket bør være »spilvurderinger«) på brugerprofilsiderne. Desuden kan jeg ikke forstå, at jeg bliver ratet »sjov«, når jeg gør opmærksom på problemet.
#3
Det kan sagtens laves i javacript og html.
#1
uden at vide lidt mere om hvad det er du præcist mener med et ryk system, er det selvfølgelig lidt svært at vejlede.
http://jsfiddle.net/c58eg/3/
*edit* lidt forklaring
Den røde boks symboliser et rum, dette ville noget være et fint billede som baggrund, evt med nogle non draggable områder oven på for at markere borde og what not.
evt specifikke drop zones som stole osv.
de blå bokse er personer/avatars..
http://jqueryui.com/draggable/
http://jqueryui.com/droppable/
det her er baseret på at dragge rundt.
Dette er selvfølgelig langt fra løsningen i det man kan dragge "alle" rundt her i, du skal selvfølgelig kun, kunne dragge dig selv i en chat. Dog kan det godt klares ved at give din egen avatar en bestemt class, eller fange den ud fra id, og så kun lade den være "draggable" for dig.
Der udover skal du have noget db der holder styr på hvor folk flytter deres person hen af.
Alt i alt, er det at lave en 3d chat ikke "bare lige" men hvis du er frisk på at lave noget arbejde, og har lidt egenskaber inden for programmering er det ikke umuligt.
Det kan sagtens laves i javacript og html.
#1
uden at vide lidt mere om hvad det er du præcist mener med et ryk system, er det selvfølgelig lidt svært at vejlede.
http://jsfiddle.net/c58eg/3/
*edit* lidt forklaring
Den røde boks symboliser et rum, dette ville noget være et fint billede som baggrund, evt med nogle non draggable områder oven på for at markere borde og what not.
evt specifikke drop zones som stole osv.
de blå bokse er personer/avatars..
http://jqueryui.com/draggable/
http://jqueryui.com/droppable/
det her er baseret på at dragge rundt.
Dette er selvfølgelig langt fra løsningen i det man kan dragge "alle" rundt her i, du skal selvfølgelig kun, kunne dragge dig selv i en chat. Dog kan det godt klares ved at give din egen avatar en bestemt class, eller fange den ud fra id, og så kun lade den være "draggable" for dig.
Der udover skal du have noget db der holder styr på hvor folk flytter deres person hen af.
Alt i alt, er det at lave en 3d chat ikke "bare lige" men hvis du er frisk på at lave noget arbejde, og har lidt egenskaber inden for programmering er det ikke umuligt.
#5 - Mange tak for dit svar, dog søger jeg ikke helt et drag system, Nærmere et system hvor man trykker et sted, og der kommer man hen.
Jeg tænker lidt på at lave det som små "bokse", som man så kan flytte rundt i mellem. Det er i og for sig også let nok at lave i PHP, men jeg ved ikke lige hvordan jeg skal få javascript til at følge med ved at opdatere "rummet/billedet" hele tiden, med hvor de forskellige personer er placeret.
Jeg tænker lidt på at lave det som små "bokse", som man så kan flytte rundt i mellem. Det er i og for sig også let nok at lave i PHP, men jeg ved ikke lige hvordan jeg skal få javascript til at følge med ved at opdatere "rummet/billedet" hele tiden, med hvor de forskellige personer er placeret.
Ajax is your friend :)
jeg ville nok gemme en liste over personer der er tilstede i rummet, og deres position i top-left (altså 0,20) værende 0px fra toppen, 20px fra venstre side)
det blev selvfølgelig updated via ajax hver gang en person flyttede sin avatar.
og hvert sekund/hvert andet, ville jeg så hente op hvem der er, og hvor de er, tjekke om det er samme sted som de var før, hvis ikke, flytte den avatar, ellers lade den være. hvis de ikke er der længere, skal de selvfølgelig helt fjernes.
mht at rykke via click, burde det ikke være noget problem
http://jsfiddle.net/WAQkV/
*edit* forklaring:
silver/grå = rummet man er i
grøn = stol man kan "sætte sig på"
rød = et bord man sidder ved
blå = dig
jeg ville nok gemme en liste over personer der er tilstede i rummet, og deres position i top-left (altså 0,20) værende 0px fra toppen, 20px fra venstre side)
det blev selvfølgelig updated via ajax hver gang en person flyttede sin avatar.
og hvert sekund/hvert andet, ville jeg så hente op hvem der er, og hvor de er, tjekke om det er samme sted som de var før, hvis ikke, flytte den avatar, ellers lade den være. hvis de ikke er der længere, skal de selvfølgelig helt fjernes.
mht at rykke via click, burde det ikke være noget problem
http://jsfiddle.net/WAQkV/
*edit* forklaring:
silver/grå = rummet man er i
grøn = stol man kan "sætte sig på"
rød = et bord man sidder ved
blå = dig
#7 - Mange mange gange tak, lige præcis sådan noget jeg skulle bruge.
Kan man hente kildekoden på dette system nogle steder? så jeg har noget at gå ud fra.
Og hvilke funktioner vil du benytte i Ajax? - Da jeg skrev Ajax i mit indlæg, mente jeg jQuery, har ikke haft meget kendskab til ajax endnu. men det må jo prøves ;=)
Kan man hente kildekoden på dette system nogle steder? så jeg har noget at gå ud fra.
Og hvilke funktioner vil du benytte i Ajax? - Da jeg skrev Ajax i mit indlæg, mente jeg jQuery, har ikke haft meget kendskab til ajax endnu. men det må jo prøves ;=)
#8
Alt koden til det jeg har lavet kan du se direkte i linket :)
der er selvfølgelig stadig et stykke fra det jeg har lavet, til et "rigtigt" 3d/2d chat room.
men det burde da give et fingerpeg :)
mht ajax/jquery er der mange måder at gøre det på.
en måde kunne være noget i stil med:
url skal så selvfølgelig pege på en fil/webservice der returner det json du vil have.
data er et tomt object, dette object er hvad du sender ind til din webservice. Dette ville nok indholde et roomid
eks på return data/json:
eks kunne top og left ændres til en form for id/guid der identifier hvilken "block"/grid-position som den avatar optager.
Alt koden til det jeg har lavet kan du se direkte i linket :)
der er selvfølgelig stadig et stykke fra det jeg har lavet, til et "rigtigt" 3d/2d chat room.
men det burde da give et fingerpeg :)
mht ajax/jquery er der mange måder at gøre det på.
en måde kunne være noget i stil med:
$.ajax({
global: false,
type: 'get',
dataType: 'json',
url: 'url',
data: {},
timeout: 0,
})
.done(function(data, textStatus, xhr) {
var objAvatars = jQuery.parseJSON(data);
//nu kan du så finde top/left som objAvatars[0].top;
});url skal så selvfølgelig pege på en fil/webservice der returner det json du vil have.
data er et tomt object, dette object er hvad du sender ind til din webservice. Dette ville nok indholde et roomid
eks på return data/json:
[{username:"Person 1", top:20, left:5},{username:"Person 2", top:40, left:25}]eks kunne top og left ændres til en form for id/guid der identifier hvilken "block"/grid-position som den avatar optager.
#10
php er desværre ikke noget jeg er ret god til men ja.
Du laver bare en fil, lad os sige "getAvatarsByChatRoomId.php"
og inde i den har du så:
nu er det her jo så statisk, men du forstår vidst pointen, ellers må du sige til, så skal jeg prøve at forklare bedre :)
php er desværre ikke noget jeg er ret god til men ja.
Du laver bare en fil, lad os sige "getAvatarsByChatRoomId.php"
og inde i den har du så:
<?php
class avatar
{
public $username;
public $positionTop;
public $positionLeft
}
$avatar1 = new avatar();
$avatar1->username = 'person 1';
$avatar1->positionTop = 20;
$avatar1->positionLeft = 5;
$avatar2 = new avatar();
$avatar2->username = 'person 2';
$avatar2->positionTop = 40;
$avatar2->positionLeft = 25;
$avatars= array($avatar1, $avatar2);
echo json_encode($avatars);
?>
nu er det her jo så statisk, men du forstår vidst pointen, ellers må du sige til, så skal jeg prøve at forklare bedre :)
#12 selv tak
i #9, inde i done funktionen kan du tilgå dem.
var objAvatars = jQuery.parseJSON(data);
//nu kan du så finde top/left som objAvatars[0].top;
objAvatars bliver ud fra jQuery.parseJSON sat til et array af avatars
og nu kan du så finde dem i det array.
du kan jo evt lave en global variable som du assigner til i stedet.
mht at gøre det hvert sekund
kan du inde i selv samme done funktionen
"genstarte" kaldet
dette kan nok ikke ligefrem kaldes absolute best practice, but oh well, man skal jo starte et sted, og man kan altid optimere. Dit første mål må være at få noget der virker, om end det så ikke er verdens smarteste eller mest optimale.
den måde det her fungere på, er at når den er færdig med at hente dine avatars fra din php fil, og har assigned dem til dit array "avatars" så får den besked på at om 1 sekund skal den lige gøre det en gang til.
i #9, inde i done funktionen kan du tilgå dem.
var objAvatars = jQuery.parseJSON(data);
//nu kan du så finde top/left som objAvatars[0].top;
objAvatars bliver ud fra jQuery.parseJSON sat til et array af avatars
og nu kan du så finde dem i det array.
du kan jo evt lave en global variable som du assigner til i stedet.
mht at gøre det hvert sekund
kan du inde i selv samme done funktionen
"genstarte" kaldet
var avatars = [];
function getAvatars() {
$.ajax({
global: false,
type: 'get',
dataType: 'json',
url: 'url',
data: {},
timeout: 0,
})
.done(function(data, textStatus, xhr) {
avatars = jQuery.parseJSON(data);
drawAvatars();
setTimeout(function(){getAvatars();},1000); //1000 ms = 1 sekund
});
}
function drawAvatars() {
//her skal du så have noget kode til faktisk at tegne dine avatars i dit rum ud fra dit array avatars og de værdier hver objekt i arrayet har.
}
dette kan nok ikke ligefrem kaldes absolute best practice, but oh well, man skal jo starte et sted, og man kan altid optimere. Dit første mål må være at få noget der virker, om end det så ikke er verdens smarteste eller mest optimale.
den måde det her fungere på, er at når den er færdig med at hente dine avatars fra din php fil, og har assigned dem til dit array "avatars" så får den besked på at om 1 sekund skal den lige gøre det en gang til.
#13 - Du skal have 1000 mange tak, kan vist ikke tillade mig at bruge mere din aften på dette :P selvom det virker som om du har godt styr på netop hvad jeg skal bruge :).
Jeg siger tusind tak, kan du have en god aften.
P.S Har du evt et dansk Ajax guide jeg kan læse? - Er næsten et must :D
Jeg siger tusind tak, kan du have en god aften.
P.S Har du evt et dansk Ajax guide jeg kan læse? - Er næsten et must :D
#14 selv tak. Det er intet besvær :) Fruen ser Ringenes herre, og det gider jeg faktisk ikke så møj, så fint med noget andet at lave imens ;)
http://www.nemprogrammering.dk/Tutorials/jQuery/jQ...
virker umiddelbart ganske udmærket det er selvfølgelig ikke direkte det du eftersøger (altså et chatroom) men det er dansk :)
Ellers kan du altid spørge igen her på newz, jeg lurer altid på programmerings trådene, og sådan set næsten alle tråde, så mon ikke jeg ser din tråd, eller nogle andre gør :)
http://www.nemprogrammering.dk/Tutorials/jQuery/jQ...
virker umiddelbart ganske udmærket det er selvfølgelig ikke direkte det du eftersøger (altså et chatroom) men det er dansk :)
Ellers kan du altid spørge igen her på newz, jeg lurer altid på programmerings trådene, og sådan set næsten alle tråde, så mon ikke jeg ser din tråd, eller nogle andre gør :)
cgt (2) skrev:Jeg synes i er meget dårlige til at undgå særskrivninger her på newz.dk
Nu håber jeg ikke der er andre der har kommenteret det, men måske skulle du overveje selv at lære retskrivning inden du brokker dig.
Edit: Jeg har markeret problemet for dig
Da jeg var lille betød det en chat hvor man havde en figur man kunne flytte rundt på (så egentlig mere 2D). I modsætning til tekstchat.
Et tip hvis du vælger at bruge PHP, så har jeg bedst erfaringer med long polling (dvs. du ikke henter nye positioner hvert sekund, men laver et AJAX request der bliver ved med at køre til det timeouter eller der er nye positioner. på den måde kan du opnå næsten realtime, samtidig med at du har minimal antal requests til din server.
Jo, det er i hvert fald det jeg forestiller mig OP gerne vil lave. Men det er jo også mere 2D end det er 3D.
Jeg har lavet en kopi af N.DK som kører i en Java-applet. Det var nu mest for at lære netværksdelen mellem en server og mange klienter. Men jeg kom også til at lære en hel del 2D-teknikker som partial redraw og double-buffering som man ikke får gratis med når man benytter Java 2D uden framework. Udover det fik jeg lært en masse om tråde i Java.
Noget af det der tog længst tid var at få rigtigt var at få taleboblerne til at være pixel-perfect :P
Jeg har dog benyttet mig af billeder som jeg ikke må benytte for at bygge prototypen. Men jeg har hyret en flink gut fra Afrika til at tegne mig nogle ordentlige figurer som jeg har rettighederne til.
Jeg overvejede også at lave det i HTML/Javascript og med en NodeJS backend og benytte mig af noget lignende NowJS eller Socket.io. Men jeg gad ikke bøvle med flere browser udgaver og deres interne versioner. I dag kunne man muligvis benytte sig af canvas-elementet fra HTML5.
Noget af det der tog længst tid var at få rigtigt var at få taleboblerne til at være pixel-perfect :P
Jeg har dog benyttet mig af billeder som jeg ikke må benytte for at bygge prototypen. Men jeg har hyret en flink gut fra Afrika til at tegne mig nogle ordentlige figurer som jeg har rettighederne til.
Jeg overvejede også at lave det i HTML/Javascript og med en NodeJS backend og benytte mig af noget lignende NowJS eller Socket.io. Men jeg gad ikke bøvle med flere browser udgaver og deres interne versioner. I dag kunne man muligvis benytte sig af canvas-elementet fra HTML5.
Lidt cool at man kan blokkere andre brugere ved at stille sig foran dem og fyre en masse placeholdertekst af...
Brugernavn (31) skrev:Lidt cool at man kan blokkere andre brugere ved at stille sig foran dem og fyre en masse placeholdertekst af...
Det er så hvad det er, jeg kan ikke se hvordan man kan have talebobler uden man kan fucke det op.
Det bedste er at NS i den nuværende implementation har problemer med at placere objekter i de korrekte lag.
Det betyder at ting der er i baggrunden, kan ligge sig foran figurer, og andre ting som er i forgrunden.
Det ødelægger fuldstændigt hvad der oprindeligt har været tænkt bag designet af systemet, men nogen har pisset højt og helligt på dette, og smidt mere åndssvag grafik ind, uden at tænke på implementationen (eller på at revidere denne)
Her er et bedre billed af NS: http://i.imgur.com/PLMad.png
Gå til top
Opret dig som bruger i dag
Det er gratis, og du binder dig ikke til noget.
Når du er oprettet som bruger, får du adgang til en lang række af sidens andre muligheder, såsom at udforme siden efter eget ønske og deltage i diskussionerne.
- Forside
- ⟨
- Forum
- ⟨
- Programmering
Gå til bund