moteur de jeu de course en 2D (pseudo3D)

[F.L]

pour ceux qui seraient interessés,
voici comment faire un petit jeu de course en 2D de ce genre :

si vous voulez allez directement aux dessins-expliquations du moteur, allez en bas de ce post.

il y a 3 ans quand j'ai commencé à faire mon remake de outrun, je n'ai pas trouvé d'exemple
de moteur de ce genre (en basic) sur le net....
puis j'ai trouvé la page de Lou Gorenfeld, qui explique tres bien comment faire bien en detail
mais en anglais comment fonctionnaient les jeu de courses 2D des années 80.
voici le lien :
http://www.extentofthejam.com/pseudo/
dans la derniere mise à jour de ce site en 2013, Lou Gorenfeld a hélas retiré le petit exemple
en basic (qb45) de ses codes. heureusement je les avais gardé, et je les ai adapté pour qb64 :

Code:

SCREEN 13 ' (320x200)
_TITLE "2D ROAD engine"
'_FULLSCREEN

' engine by F.L from lou gorenfeld example : http://www.gorenfeld.net/lou/pseudo/
' to run with qb64 : http://www.qb64.net/


CONST RoadLines = 66
SpeedScroll = 5
CONST RoadY = -1 'arbitrary
CONST ResX = 320
CONST ResY = 200
CONST PlrLine = 8 '  ??
DIM ZMap(RoadLines) AS SINGLE


horizon = 134


' Initialize ZMap
FOR A = 1 TO RoadLines
    ZMap(A) = RoadY / (A - (ResY / 2))
NEXT A

' Normalize ZMap so the line with the player on it is scale=1 (or would be
' If we had a player sprite :))  ' ??
b = 1 / ZMap(PlrLine)
b = b * 300 '                    height of road strips
FOR A = 1 TO RoadLines
    ZMap(A) = ZMap(A) * b
NEXT A


' Draw the road
DIM X AS SINGLE
DIM DX AS SINGLE
DIM DDX AS SINGLE
DIM HalfWidth AS SINGLE
DIM SegY AS SINGLE

TexOffset = 100
SegY = RoadLines
DX = 0
DDX = -.05 ' angle of turn

'           main loop

DO

    HalfWidth = 160 '  width of road
    WidthStep = 2.3 '  inclination of the straight road

    '                               keyboard  input

    IF _KEYDOWN(19712) THEN DDX = -.05
    IF _KEYDOWN(19200) THEN DDX = .05

    IF _KEYDOWN(20480) THEN SegY = SegY + 1
    IF _KEYDOWN(18432) THEN SegY = SegY - 1

    '                           limits of the turn


    IF SegY < 0 THEN SegY = 0
    IF SegY > RoadLines THEN SegY = RoadLines

    ' Set up the frame

    X = 160 ' center of road

    DX = 0 ' try 1 or -1 to change the side the road


    ScreenLine = ResY - 1

    FOR A = 1 TO RoadLines
        IF (ZMap(A) + TexOffset) MOD 100 > 50 THEN
            GrassColor = 10
            RoadColor = 7
        ELSE
            GrassColor = 2
            RoadColor = 8
        END IF

        ' road

        LINE (X - HalfWidth, ScreenLine)-(X + HalfWidth, ScreenLine), RoadColor

        ' left grass
        LINE (0, ScreenLine)-(X - HalfWidth, ScreenLine), GrassColor

        ' right grass
        LINE (X + HalfWidth, ScreenLine)-(320, ScreenLine), GrassColor


        HalfWidth = HalfWidth - WidthStep
        ScreenLine = ScreenLine - 1

        IF A > SegY THEN
            DX = DX + DDX
        END IF

        X = X + DX

    NEXT A

    ' Wrap positions (fractional):

    TexOffset = TexOffset + SpeedScroll
    WHILE TexOffset >= 100
        TexOffset = TexOffset - 100
    WEND


    ' background display

    LINE (0, 0)-(320, horizon - 1), 9, BF


    '  others display

    COLOR 15, 9

    LOCATE 1, 1: PRINT "esc to exit"
    LOCATE 2, 1: PRINT "up-down :  do the curve"
    LOCATE 3, 1: PRINT "left-right : change the direction"
    LOCATE 7, 10: PRINT "turn to the"

    COLOR 4, 9
    IF DDX = -.05 THEN LOCATE 7, 22: PRINT "right"
    IF DDX = .05 THEN LOCATE 7, 22: PRINT "left"

    _LIMIT 50

    _DISPLAY

    IF _KEYDOWN(27) THEN END

LOOP


et voici l'exe :
http://fl.basic.free.fr/pseudo3D/2droad.zip
n'etant pas tres fort pour comprendre les codes d'un autre,j'ai mis de longues semaines à comprendre
comment ça fonctionnait. j'ai reussi à comprendre les grandes bases de ce petit moteur
je crée ce topic pour expliquer aux neophites comment ça fonctionne et pour leur
donner les bases pour se faire un petit jeu de course sans se prendre trop la tete.
je ne sais pas faire les virages en S, ni vraiment faire les colinnes et descentes,
d'autres maitrisent mieux que moi le sujet, si vous voulez  appronfondir le sujet ,
allez voir le moteur en javascript de chris gordon tres bien fait et open source :
http://codeincomplete.com/posts/2012/6/23/javascript_racer_v1_straight/
encore plus fort, regardez les travaux de chris white et son fameux Cannonball
un américain qui a re-assemblé pendant 2 ans le jeu d'arcade Outrun en C
http://reassembler.blogspot.fr/
de mon coté, si vous voulez voir ce dont je suis capable mes jeux faits avec ces codes, les voici :
un remake de crazy cars
il n'y a pas plus simple. il n'y a que la route qui bouge et le decor qui defile.
ce jeu a été fait en un week-end pour le moteur de jeu,
puis tout le reste m'a pris un mois pour les graphismes, le sons et le debuggage :
http://crazycarscpc.free.fr/
et mon second jeu, un remake de Outrun à la sauce Amstrad CPC :
http://outruncpc.free.fr/
par contre, là c'est autre chose. il y a deux routes, des objets au bord de route qui avance,qui zooment
le projet là n'ets pas fini car il est enorme à gerer pour le temps libre dont je dispose.
ça fait deja deux ans que je l'ai commencé, et je ne sais pas quand il sera fini !
dans le zip du jeu, il y a un fichier txt qui explique
comment personnaliser le jeu, si jamais vous n'etes pas codeur. il y a moyen de se faire un
petit outrun perso en changeant les grahismes et en personnalisant la route; a voir
apres tout ce long discours, je vais montrer en quelques dessins
les grandes lignes de ce fameux moteur de jeu :
voici notre ecran. c'est un ecran en 320x200. voici le beau ciel et l'herbe par terre

la route se dessine sur un axe, apellé X. placé arbitrairement au milieu de l'ecran
cet ligne droite se dessine pixel par pixel du bas de l'ecran
jusqu'àu milieu de l'ecran environ pour simuler l'horizon.
ce nombre de pixels c'est le nombre de ligne de route (Roadlines). il y en a 66
et chaque pixel sera une ligne de la route (screenline)
la premiere screenline est en bas de l'ecran (ResY-1)=199
donc pour dessiner cet axe il faut faire
for A=1 to roadlines
"dessine le point sur X et à hauteur screenline"
screenline=screenline-1
next A
(cette boucle est importante car c'est elle qui dessine toute la route)

ensuite de chaque coté de cet axe, est dessiné une ligne.
ce sont les halfwidth, ou les demi-largeur de route.
pour mon dessin, les demi-routes font 140, ce qui fait une route de 280

comme ça ça ne ressemble pas vraiment à une route.
mais si à chaque fois qu'on remonte d'une screenline, on retire un peu de largeur (widhtstep)
à ces demi-route, voici ce que ça donne

for A=1 to roadlines
"dessine X+halfwidht à hauteur screenline"
halfwidht=halfwidht-widhtstep
screenline=screenline-1
next A
ça donne de suite une impression de profondeur!
pour donner une meilleur impression de profondeur, il faut donner à chaque screeline une couleur
pour simuler des "bandes" de route comme dans les jeux des annés 80
ce sont les codes avec les fonction Zmap et textoffset qui s'en occupent. suivant la hauteur,
la ligne se route dessinée sera de telle ou telle couleur
IF (ZMap(A) + TexOffset) MOD 100 > 50 THEN
            GrassColor = 10
            RoadColor = 7
        ELSE
            GrassColor = 2
            RoadColor = 8
END IF

ensuite, pour faire des lignes d'herbe de couleur differentes elles aussi,
il suffit de rajouter des lignes de couleurs differentes avant et apres les 2 halfwidht
en faisant :
"dessine une ligne de couleur grasscolor de 0 à X-halwidht" pour le coté gauche
"dessine une ligne de couleur grasscolor de X+halwidht à 320" pour le coté droit

et voici ce que ça donne avec les deux cotés.
pour finir, la variable speedscroll fait bouger la position des lignes colorée
et donne l'impression que ça avance. tout bete !

les lignes droites c'est bien, mais avec des virages c'est mieux.
donc, il faut maintenant donner l'illusion qu'il y a un virage.
en fait, il suffit de courber l'axe X
rapellez vous que cet axe monte pixel par pixel du bas.
si à chaque remontée on le decale avec une variable DDX et bien cet axe se courbe
ça donne
for A=1 to roadlines
"dessine le point sur X et à hauteur screenline"
X=X-DDX
screenline=screenline-1
next A

la variable SegY est depart (en hauteur) de la courbe.
c'est à dire le numéro de la screenline où l'effet de DDX va commencer de deplacer X
dans cet exemple, SegY est égal à 33. donc, DDX va commencer à prenre effet à la screenline 33
jusqu'a la ligne 66 (max= Roadlines).
voici ce que ça donne avec le halfwidht.
la courbure accentue l'impression de distance

voici ce que ça donne avec les deux cotés puis l'herbe

il ne manque plus que de coller par dessus un sprite de votre voiture, un decor qui bouge et l'impression
est là !
voila, j'espere que ces images vous auront aidé à mieux comprendre ce moteur en pseudo3D de Lou Gorenfeld
et donnera envie à certains de se lancer dans l'aventure !
il reste pas mal de chose à expliquer pour faire un jeu en entier. mais il vaut mieux commencer
doucement au debut pour ne pas se decourager !
@+

[iwillbeback]

Merci pour cette très bonne initiative. Je garde ces infos dans mon calpin de dev..

F.L > ça sent la réadaptation de Super Hang-On ou de Crazy Cars 2.. non ?

[invité]

Tres interessant !

[Invité]

j'ai lu un peu les liens que tu as cités...super interessant

[F.L]

merci à vous !

>>fofo.rider non, pas de nouveau remake en vue. je vais essayer de finir outrun ça sera deja pas mal ! par contre, avec ce moteur un remake de HangOn ça serait facilement gérable si ça tente quelqu'un.....

edit : j'ai mis à jour le lien de l'exe en .zip, car avast me bloquait le lien...

[drfloyd]

merci pour ce moteur

J'en avais crée un maison sans aide au feeling pour mon jeu de caisse ENDURO 3 :

https://www.gamopat-forum.com/t52377-termine-euduro-3-the-great-cross-european-road-race-pc

mais faut avouer qu'il etait un peu particulier....

[rendomizer]

Bien que tu es réalisé une route en pseudo 3d et un jeux complet de outrun revisité  qui est pour les passionnés de outrun une vraie avancée technique et que tu as compris, je trouve que c'est le meilleur. mais il y a un point sur lequel je bloque.Comment trouver les positions x et y des voitures d'en face dans ton moteur ?


quand a mon moteur il y a plus de facilitée a le comprendre a mon sens.C'est tout d'abord un algorithme de la courbe de BEZIER qui détermine les position x et y de départ et d'arrivés ainsi que la monté et la descente exprimé par les variables de vecteurs de fin de la courbe...

Voici un exemple en basic QB64 de la courbe de bezier avec changement des variables avec les touches de direction

Code:

SCREEN 12

x1 = 340 ' X start est le poin de fuite de l'horizon
y1 = 200 ' Y start
vx1 = 340 ' X vector start
vy1 = 200 ' Y vector start  change cette variable avec y start pour simuler une montée ou une descente ...
x2 = 600 ' X end
y2 = 400 ' Y end
vx2 = 600 ' X vector-end
vy2 = 400 ' Y vector-end
debut:
tt = tt + .01

positionx = x1 * (1 - tt) ^ 3 + 3 * vx1 * (1 - tt) ^ 2 * tt + 3 * vx2 * (1 - tt) * tt ^ 2 + x2 * tt ^ 3
positiony = y1 * (1 - tt) ^ 3 + 3 * vy1 * (1 - tt) ^ 2 * tt + 3 * vy2 * (1 - tt) * tt ^ 2 + y2 * tt ^ 3

PSET (positionx, positiony), 2
IF _KEYDOWN(19200) = -1 THEN x1 = x1 - .01: CLS
IF _KEYDOWN(19712) = -1 THEN x1 = x1 + .01: CLS
IF _KEYDOWN(18432) = -1 THEN vy1 = vy1 + .01: CLS
IF _KEYDOWN(20480) = -1 THEN vy1 = vy1 - .01: CLS
IF tt > 1 THEN tt = 0
GOTO debut


[F.L]

pour les positions x et y des voitures ou des arbres, c'est "facile"
- pour le Y des autos, à chacun sa methode. il y a plein de possibilité. ma mienne c'est de créer un Ypour un sprite, par exemple Yauto qui descend par rapport à la vitesse de la route (speedscroll)
ensuite, dans la boucle d'affichage de la route, pour connaitre le x du sprite, je demande si Yauto=screenline (la ligne en cours d'affichage)
- une fois le Y connu, tu auras le x du sprite, nommé par exemple Xauto. X est le milieu de chaque screeline. tu place ton Xauto à l'endroit que tu veux par rapport X en gardant le halfwidht de ta screenline comme unité de mesure.
ex: afficher auto à X - (halwidht/2)

et pour ton exemple de la courbe de bezier, ça rend tu pourrais expliquer un peu le code pour les montées et descentes comme je l'ai fait pour la route ?

[rendomizer]

pour les positions x et y des voitures ou des arbres, c'est "facile"
- pour le Y des autos, à chacun sa methode. il y a plein de possibilité. ma mienne c'est de créer un Ypour un sprite, par exemple Yauto qui descend par rapport à la vitesse de la route (speedscroll)
ensuite, dans la boucle d'affichage de la route, pour connaitre le x du sprite, je demande si Yauto=screenline (la ligne en cours d'affichage)
- une fois le Y connu, tu auras le x du sprite, nommé par exemple Xauto. X est le milieu de chaque screeline. tu place ton Xauto à l'endroit que tu veux par rapport X en gardant le halfwidht de ta screenline comme unité de mesure.
ex: afficher auto à X - (halwidht/2)

et pour ton exemple de la courbe de bezier, ça rend tu pourrais expliquer un peu le code pour les montées et descentes comme je l'ai fait pour la route ?

avec l’algorithme c'est pas compliqué il te suffit juste de changer la variable x1 pour le le deplacement de l'horizon vx1  pour la monter et la descente de l'horizon tu changes les variables y1 et vy1 et pour la bosse de debut vy2 et y2... voilou !

[F.L]

ok, mais j'auraisaimé savoir pourquoi et comment ça marche en fait....si possible
ça aiderait ceux qui lisent ce sujet et qui aimeraient faire un jeu de course en 2D
@+

[rendomizer]

pour le défilement de la route ? il y a une commande "en blitzplus" qui créer carré avec la la hauteur de ton choix ici il est incrémenté de .35 fois ce qui donne avec l’algorithme un effet de défilement la commande est " rect,x,y,largeur,hauteur,plein/pas plein"
en QB64 je ne sais pas si il peut faire ça il faudrait voir...

logiciel blitzplus: https://www.dropbox.com/s/jjzqcj0btq24itw/BlitzPlusSetup147.exe?dl=0

tient je te donnes un bel exemple en "blitzplus"

Code:

Graphics 600,400,32,2
x1=0:vx1=x1:y1=0:vy1=y1:x2=0:vx2=x2:y2=400:vy2=y2:t#=1
.debut
tt#=tt#+.01:l#=l#+.35
If l#>5 Then l#=0
If tt#>1 Then
 
tt#=0

If KeyDown(203)=1 Then vx1=vx1-1
If KeyDown(205)=1 Then vx1=vx1+1
If KeyDown(200)=1 Then t#=t#+.1:Delay 100
If KeyDown(208)=1 Then t#=t#-.1:Delay 30
If KeyDown (1)=1 Then End
Color 255,255,255:Text 1,1,""+t#
Flip:Cls
End If
poinbx1# = x1*(1-tt)^3 + 3*vx1*(1-tt)^2*tt + 3*vx2*(1-tt)*tt^2 + x2*tt^3
poinby1# = y1*(1-tt)^3 + 3*vy1*(1-tt)^2*tt + 3*vy2*(1-tt)*tt^2 + y2*tt^3
Color 0,255,0:Rect poinbx1,poinby1,600,l#,1
Goto debut

[F.L]

salut à tous
je remonte ce sujet car ce week-end à montpellier, avait lieu la retro game jam
pour ceux qui ne connaissent pas le principe des game jam : en deux jours, il faut créer un jeu. en général, il y a plusieures equipes qui créent leurs jeux dans une meme salle, mais à cause des evenements du week-end, cette année le concours a été fait exeptionnellement à distance. les groupes ont fait ça chez eux, tout comme moi. tout seul, en loup solitaire  
au passage, je remercie 65c02 qui m'a invité à cet evenement. malheureusement cette année, il n'a pas concouru
pourquoi je vous parle de ça ?
parceque j'ai participé à cette game jam et j'ai utilisé les principes expliqué en debut de sujet pour créer un petit jeu de course , remake du jeu "turbo cup"en seulement 19 heures, preuve qu'on peut facilement faire un jeu de course avec ce principe de route en pseudo3D

si vous voulez decouvrir les jeux du concours et aussi le mien, voici la page internet ou ça se passe :
https://itch.io/jam/retro-game-jam-2015
voila, j'espere que mon petit jeu vous plaira, ainsi que les autres.
le mien manque un peu de finitions car je n'ai pas utilisé tout le temps imparti, il faut dire que ce week-end n'etait pas tres propice à la concentration...
à mon avis, celui qui va gagner cette année est Builderland-8 - Super Gravity Edition
et peut etre que ça vous donnera envie d'y participer l'année prochaine pourquoi pas !
@+

[rendomizer]

Fabuleux ton turbo cup F.L ! mais les caisses on l'air de cabrer ... il faudrait les retressir devant ! t'as assurer pour les bandes de route.j'aimerai bien consulter ton code.

[F.L]

merci randomizer
la source est incluse dans le zip