Partage
  • Partager sur Facebook
  • Partager sur Twitter

[javascript/canvas] framework de jeu

Anonyme
17 avril 2016 à 15:49:10

Introduction

Salut tout le monde, j'ai eu envie de créer un petit framework qui pourrait me permettre de créer des petits jeux plus facilement, j'ai déjà regardé du côté des frameworks existant, mais j'avais envie de faire mon propre bazar pour mieux le comprendre.

Le moteur est simple, l'affichage se fait via la balise Canvas et le tout est codé en Javascript.

tous les éléments sont représentés par des objets "entité" présents dans un objet global, "le monde" qui lui contient les ressources (images/sprites/sons), et qui s'occupe du rendu à l'écran.

Objectif

L'objectif de ce projet serait de créer un petit moteur simple et robuste, ensuite de créer des jeux avec.

Composants

  • Affichage :  Canvas
  • Contrôles : Pointer / Clavier
  • Langage : Javascript

// Demos

-
Edité par Anonyme 23 novembre 2017 à 19:16:08

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
19 avril 2016 à 0:50:09

Bon, :) j'ai rajouté la gestion d'événements comme la mort dans cette exemple, qui recharge la map et positionne le joueur au points de dépars.

-
Edité par Anonyme 5 février 2017 à 11:18:57

  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2016 à 16:57:50

Hey salut !

J'aime ton projet juste enfaite c'est un moteur de jeu pour platformer c'est ça ?

  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
Anonyme
19 avril 2016 à 17:15:38

Heu oui, j'aime beaucoup les jeux de plateforme, mais tu peux changer des paramètres pour faire d'autres types de jeux 2D avec, la j'ai juste mis la gravité.
  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2016 à 17:52:46

Pourrais tu rajouter des systèmes d'ombrages et autres ? Mais pas du GLSL Shader, des shader propre au moteur par exemple quelque chose comme ça : (je ne m'y connait pas trop en javascript je fais avec ce que je sais ^^)

var playerlight = lumière(circle, 500, playerx, playery) // créer une lumière ronde de 500 de diamètre a la position du joueur x et y

  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
Anonyme
19 avril 2016 à 19:19:22

Une lampe torche ?

Oui, c'est ça, tu dessines un cercle sur un fond noir et superpose avec le rendu du jeu.

-
Edité par Anonyme 26 avril 2016 à 1:32:58

  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2016 à 19:51:59

Pas mal :D Et des lumières directionnelles ?
  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
Anonyme
19 avril 2016 à 20:01:59

Manyrio a écrit:

Pas mal :D Et des lumières directionnelles ?


je pourrais je pense, mais encore une fois x) je ne suis pas un pro et je veux rester simple.
  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2016 à 20:14:52

C'est pas dure les lumières directionnelles ^^ x)
  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
19 avril 2016 à 20:49:53

Génial comme projet ! Je mets un petit message pour suivre les prochaines nouveautés du projet ^^

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
21 avril 2016 à 15:15:07

Bon, j'ai remis à jour le systeme de tiles, mais il y a encore des petits problèmes à ce niveau la.

l'animation fonctionne bien :) et j'ai créé deux trois sprites.

-
Edité par Anonyme 5 septembre 2017 à 22:29:24

  • Partager sur Facebook
  • Partager sur Twitter
21 avril 2016 à 15:30:21

Quelles sont les problèmes de sprites ?
  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
Anonyme
21 avril 2016 à 17:54:11

L'animation se déroule bien, mais la durée d'affichage de la dernière frame est plus rapide que les autres donc je dois revoir ça :P.

Sinon pour les tiles, tout est bon, je devrais juste refaire le systeme pour utiliser une seule image et pas plusieurs liens pour la map.

-
Edité par Anonyme 21 avril 2016 à 17:55:06

  • Partager sur Facebook
  • Partager sur Twitter
21 avril 2016 à 18:19:16

Intéressante ! :D
  • Partager sur Facebook
  • Partager sur Twitter
Codeur en herbe en C++ et Html/Css/JavaScript. Passez voir la chaîne Computer Scientists
Anonyme
23 avril 2016 à 15:02:49

J'ai revu la collision et le déplacement des entités, 

c'est pas une intelligence artificielle folle, elle se promène juste sur la map dans un sens jusqu'à rencontrer un obstacle. 

j'ai modifié les collisions aussi,  l'ancienne méthode était pas top.

-
Edité par Anonyme 5 septembre 2017 à 22:29:27

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
23 avril 2016 à 19:02:49

Moteur, ça tourne, action !

:) petit message pour la Camera, de base elle suivait le joueur et le plaçait au centre de la scène, j'ai rajouté un petit effet de transition pour que ça soit plus sympa à regarder.

-
Edité par Anonyme 5 septembre 2017 à 22:29:40

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
25 avril 2016 à 22:07:25

Ajout de transition entre des terrains, (vert > monde suivant, bleu > monde précédents ), je ferais surement un sprite en forme de Trou de ver pour représenter ces tiles ^^

-
Edité par Anonyme 5 septembre 2017 à 22:29:43

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
5 mai 2016 à 22:30:34

Petit ajout pour la balistique, chargement de puissance de projectile et ajout d'une barre de vie ou chargement :)

-
Edité par Anonyme 5 septembre 2017 à 22:29:47

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
6 mai 2016 à 15:26:02

Donc suite à ça j'ai remis le système de vie pour les créatures :)

Les entités perdent de la vie en fonction de la puissance du projectile envoyés.

Si leur vie est égale à 0, elles meurent et sont supprimées de l'array "entité".

-
Edité par Anonyme 5 septembre 2017 à 22:29:51

  • Partager sur Facebook
  • Partager sur Twitter
6 mai 2016 à 16:26:22

MMh le personnage peut tirer derrière lui en regardant devant ? ^^ :D
  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
Anonyme
6 mai 2016 à 16:35:20

Manyrio a écrit:

MMh le personnage peut tirer derrière lui en regardant devant ? ^^:D


Bah en fait c'est en fonction de la position du joueur et du curseur, donc oui tu peux tirer ou tu veux.
  • Partager sur Facebook
  • Partager sur Twitter
6 mai 2016 à 16:52:18

pk pas faire un sinus de la position du curseur ?

Et ça pourrait être cool que l'ennemie devient un peu rouge quand il perd des dégats :D

-
Edité par Manyrio 6 mai 2016 à 16:53:34

  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
Anonyme
6 mai 2016 à 17:22:52

J'ai pas très bien compris ? 

L'angle du projectile est défini par une fonction qui prend la position du joueur et celle du curseur, je fais >

X = pos.x - pos2.x

Y = pos.y - pos2.y

Math.atan2(Y, X);

et ça me donne l'angle de tire.
Pour l'animation en rouge je ne sais pas trop comment faire, si je fais une opération sur le canvas directement, ou si je fais une animation "dégat" en plus sur le spriteSheet.
  • Partager sur Facebook
  • Partager sur Twitter
6 mai 2016 à 18:07:27

tu peux faire Math.sin(Math.atan2(Y, X))
  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
Anonyme
7 mai 2016 à 8:35:35

En faisant ça l'angle de tire est bloqué à180° 

Je pense pas que ça soit un gros problème que le personnage puisse tirer derrière lui  ╮(╯▽╰)╭ 

  • Partager sur Facebook
  • Partager sur Twitter
7 mai 2016 à 13:09:50

Super, ça a l'air d'être un très bon début !

Bon courage pour la suite l'ami. :)

  • Partager sur Facebook
  • Partager sur Twitter
Créer : voilà la grande délivrance de la souffrance, voilà ce qui rend la vie légère.
Anonyme
8 mai 2016 à 12:51:52

Je mets une petite démo en ligne :)

Juste ici

Rien de fou, juste la collision / affichage / déplacement / événements logiques (mort/ tuer les ennemis / changer de niveaux).

  • Partager sur Facebook
  • Partager sur Twitter
8 mai 2016 à 13:49:50

Pas mal la démo ! Je vois que tu as fais une collision avec des tiles par polygon et pas par pixel :

Je me sens de plus en plus en l'homme qui voit le mal de partout xD

  • Partager sur Facebook
  • Partager sur Twitter
Viens jeter un coup d’œil à mon jeu :) (merci Ardakaniz) https://openclassrooms.com/forum/sujet/jeu-2d-unviplanet
Anonyme
8 mai 2016 à 14:02:19

xD oui la collision du jeu est assez basique, mais c'est le plus simple et le plus rapide à calculer je pense.

Toutes les entités sont  des carrés, donc pour ça que l'affichage peut paraitre étrange parfois. mais ça permet de charger les maps sous un format de tableau donc c'est pas mal pour la création de niveaux ^^

-
Edité par Anonyme 5 septembre 2017 à 22:30:01

  • Partager sur Facebook
  • Partager sur Twitter