Depuis quelques semaines maintenant je travaille régulièrement sur un projet qui je pense peut être intéressant à raconter, la création de mon moteur de jeux vidéos en JavaScript et HTML5 basé sur les canvas.
Tu te demande sûrement pourquoi avoir choisi HTML5 et JavaScript pour créer des jeux vidéos? La réponse est moins cool que la question, c'est le concourt de projets nécessaires pour mon école (Zone01 Normandie) et le fait que les langages ont tout le nécessaire pour mener à bien ce projet qui m'as mené à choisir ces technologies.
Mais effectivement ce n'est pas les langages que j’aurais choisi de base et je me lancerai sûrement dans d'autres aventures de ce type avec des langages différents après la finalisation de celle-ci.
Je me suis donc mis au travail pour concevoir mon moteur de jeux vidéos, il sera composé de plusieurs classes dont au moins deux principales: La classe Game qui permettra de gérer toute la zone de jeu et la classe GameObject permet de générer les objets de notre jeux et les faire interagir entre eux.
A ces classes j'ajouterai la classe CollideBox qui me permettra de gérer les boites de collision de tous les objets.
La classe Game a une méthode GameLoop qui va s'exécuter à chaque frame(image) du jeu, une méthode Draw qui sera elle appeler à chaque boucle de jeu.
Quand à la classe GameObject elle a une méthode Step, et une méthode Draw.
La première s'exécute à chaque tour de boucle de jeu et la seconde à chaque appelle de la méthode Draw de la classe GameLoop.
Cela permet donc en important le module Engine dans un projet de pouvoir théoriquement créer des jeux.
Pour l'affichage des sprites je choisi d'utiliser l’API canva qui est built-in à HTML5 (built-in signifie qu'elle viens avec par défaut)
Elle me permettra d'afficher tous les sprites et de redécouper les images afin de créer des animations ce qui me sera extrêmement utile!
Après plusieurs jours j'arrive à afficher des animations, à une vitesse donnée, à détecter des collisions via mes CollideBox.
Et plein d'autres choses sympathiques que je vous laisse zyeuter ci-dessous:
La classe GameObject
class GameObject{
constructor(game) { // Initialize the GameObject
this.x = 0
this.y = 0
this.sprite_img = {file: undefined, col: 1, row: 1, fw: 1, fh: 1, step: 0, anim_speed: 0, scale: 1}
this.loaded = false
this.game = game
this.kill = false
this.collision = new CollideBox()
game.gObjects.push(this)
};
setSprite(img_path, row=1, col=1, speed=12, scale=1) {
var img = new Image();
img.onload = () => {
console.log("image loaded")
this.sprite_img = {file: img, col: col, row: row, fw: img.width / col, fh: img.height / row, step: 0, anim_speed: speed, scale: scale}
this.onSpriteLoaded()
};
img.src = img_path
}
onSpriteLoaded() {}
draw(context, frame) { // Draw function of game object
if (this.sprite_img.file != undefined) {
let column = this.sprite_img.step % this.sprite_img.col;
let row = Math.floor(this.sprite_img.step / this.sprite_img.col);
// context.clearRect(this.x, this.y, this.sprite_img.fw, this.sprite_img.fh);
context.drawImage(
this.sprite_img.file,
this.sprite_img.fw * column,
this.sprite_img.fh * row,
this.sprite_img.fw,
this.sprite_img.fh,
this.x,
this.y,
this.sprite_img.fw * this.sprite_img.scale,
this.sprite_img.fh * this.sprite_img.scale
);
if (frame % Math.floor(60 / this.sprite_img.anim_speed) === 0) {
// Mise à jour de step seulement à 12 fps
if (this.sprite_img.step < this.sprite_img.row * this.sprite_img.col - 1) {
this.sprite_img.step += 1;
} else {
this.sprite_img.step = 0;
}
}
}
}
distance_to(pos) {
return Math.sqrt((pos.x - this.x) ** 2 + (pos.y - this.y) ** 2)
}
collide_with(box) {
if (box instanceof GameObject) {
box = box.collision
}
return (
this.collision.x < box.x + box.w &&
this.collision.x + this.collision.w > box.x &&
this.collision.y < box.y + box.h &&
this.collision.y + this.collision.h > box.y
)
}
onStep() {};
}
La classe Game
class Game {
constructor(width = 1400, height = 700) {
this.gObjects = [];
this.toLoad = [];
this.timers = [];
this.layers = [];
this.canvas = document.getElementsByTagName("canvas")[0]
this.canvas.width = width
this.canvas.height = height
this.context = this.canvas.getContext("2d")
this.context.globalCompositeOperation = 'source-over';
this.inputs = {};
this.mouse = {x: 0, y: 0}
document.addEventListener('keydown', (e) => {
this.inputs[e.key] = true;
}, false);
document.addEventListener('keyup', (e) => {
this.inputs[e.key] = false;
}, false);
document.addEventListener('mousemove', (e) => {
this.mouse.x = e.x;
this.mouse.y = e.y;
})
document.addEventListener('mouseevent', (e) => {
switch (e.button) {
}
})
}
draw(frame) {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
console.log( this.canvas.width, this.canvas.heigh)
for(let i = 0; i < this.gObjects.length; i ++) {
this.gObjects[i].draw(this.context, frame)
}
}
gLoop() {
let fps = Math.floor(1000 / 60)
console.log(fps)
let clock = 0
setInterval(() => {
clock += 1
for(let i = 0; i < this.gObjects.length; i ++) {
if (this.gObjects[i] != undefined) {
if (this.gObjects[i].kill) {
this.gObjects.splice(i, 1);
continue;
}
this.gObjects[i].onStep();
}
}
this.draw(Math.floor(clock))
// context.l();
// console.log(clock)
if (fps <= clock) {
clock = 0
}
}, fps)
}
keyboard_check(key) {
return this.inputs[key] == true
}
}
Il y a très certainement beaucoup d'erreurs d'optimisation ou autre mais le tout est bien fonctionnel,
"Parfait!" me direz vous ?
Ce serait bien trop simple.
Après avoir fini cela et commencé à tâter le terrain pour la création d'un jeu avec ce moteur, j’apprends au détour d'une conversation avec un collègue une terrible nouvelle.
J'imagine que tu te rappelle bien que les choix de technologie faits l'ont été pour correspondre aux exigences de mon école Zone01…
Et bien en effet les langages choisi étaient bons mais je n'avais pas connaissance d'une consigne qui va très sérieusement handicaper le projet…
Nous avions interdiction d'utiliser la librairie canva !
Pour rappel c'est la librairie qui nous sert à afficher nos images.
Au moment où j'écris ce texte je commence en parallèle à reprendre complètement la conception de ce moteur de jeu, sans l'utilisation de canva.
Ce devlog est terminé pour et vous aurez la suite de cette histoire bientôt ne vous inquiétez pas.
Pour le prochain devlog j’essaierai certainement un nouveau format.
En espérant que ce contenu t'ai plus, divertis ou tout du moins instruit sur quelques sujets. Je te souhaite une bonne fin de journée et bon code.
Il y a quelques mois j'ai commencé à créer mon moteur de jeux vidéos, je l'ai terminé... Il y a un bon moment même, et avec l'aide de plusieurs collègues de Zone01 nous avons même réussi à créer un jeu inspiré de Super Mario Bros disponible sur ma page Itch.io.
La décision du format à appliquer pour ce devlog à pris beaucoup de temps, et je l'avoue j'ai légèrement temporisé voir même complétement repoussé l'échéance la rédaction de celui ci.
En prenant patemment l'excuse de mon indécision pour ne pas travailler ce sujet, je me retrouve maintenant deux mois après la date de sortie prévue à écrire dans l'espace de repos de la gare routière de Rouen alors que mon train annulé m'oblige à attendre une heure supplémentaire.
因此，让我们忽略架构的所有细节，自我的开发日志的第一部分以来，这个架构的变化很小（除了通过避免使用画布进行的调整之外）。
因此，我们将讨论所进行的项目、我们作为团队的工作方式以及我们遇到的问题。
将此视为对此项目的反馈，我希望您能够从本文中吸取一些教训，这将对您的项目之一有所帮助。
该项目是用 JavaScript 重新创建一个超级马里奥兄弟，并从头开始，至少在代码方面是这样。
规格很简单，我们必须有一个具有多个级别的马里奥游戏，这是一种简单地创建新级别的方法。
此外，我们还必须创建一个记分板和一个菜单来调整选项。
这个项目的难点是：
滚动，因为它要求所有元素在背景中相对于玩家的位置滚动。
并且优化屏幕上未显示的元素可以减少运行游戏所需的资源，而不会损失性能。
解决了这些困难后，我们在我的 itch.io 页面上发布了这个游戏，您甚至可以去测试它。
本开发日志就这样结束了，现在完成了，我将能够撰写有关其他项目和/或其他主题的文章。
如果你对我告诉你的内容有一点兴趣，你可以在 github 上查看我的不同项目（包括本开发日志中的项目）。
祝你今天休息愉快！
以上是开发日志 - 我正在创建一个游戏引擎！的详细内容。更多信息请关注PHP中文网其他相关文章！
