게임 엔진을 만들고 있어요!

이 위대한 모험에 대한 소개

몇 주 동안 저는 이야기하기에 흥미로울 것 같은 프로젝트, 즉 캔버스를 기반으로 JavaScript와 HTML5로 비디오 게임 엔진을 만드는 프로젝트를 정기적으로 진행해 왔습니다.

비디오 게임을 만들기 위해 HTML5와 JavaScript를 선택한 이유가 궁금하십니까? 대답은 질문보다 덜 멋지다. 우리 학교(Zone01 Normandie)에 필요한 프로젝트 경쟁과 이 프로젝트를 수행하는 데 필요한 모든 것이 언어에 있다는 사실이 내가 이러한 기술을 선택하게 만들었다.

하지만 사실 이것들은 제가 베이스로 선택한 언어가 아니었고, 이 작품이 완성된 후에는 반드시 다른 언어로 이런 종류의 모험을 또 시작할 것입니다.

건축학

그래서 저는 비디오 게임 엔진을 디자인하기 시작했습니다. 이 엔진은 최소한 두 개의 주요 클래스를 포함하는 여러 클래스로 구성될 것입니다. 전체 게임 영역을 관리하는 Game 클래스와 객체를 생성할 수 있는 GameObject 클래스입니다. 우리 게임에서 서로 상호 작용할 수 있게 해주세요.

이 클래스에 모든 객체의 충돌 상자를 관리할 수 있는 CollideBox 클래스를 추가하겠습니다.

Game 클래스에는 게임의 각 프레임(이미지)에서 실행되는 GameLoop 메서드와 각 게임 루프 동안 호출되는 Draw 메서드가 있습니다.

GameObject 클래스에는 Step 메서드와 Draw 메서드가 있습니다.

첫 번째는 게임 루프의 각 라운드를 실행하고 두 번째는 GameLoop 클래스의 Draw 메서드가 호출될 때마다 실행됩니다.

이를 통해 엔진 모듈을 프로젝트로 가져와 이론적으로 게임을 만들 수 있습니다.

스프라이트를 표시하기 위해 HTML5에 내장된 canva API를 사용하기로 결정했습니다(내장형은 기본적으로 함께 제공된다는 의미입니다)
나에게 매우 유용한 애니메이션을 만들기 위해 모든 스프라이트를 표시하고 이미지를 다시 잘라낼 수 있습니다!

며칠 후에 주어진 속도로 애니메이션을 표시하고 CollideBox를 통해 충돌을 감지할 수 있습니다.

그리고 아래에서 볼 수 있는 다른 많은 좋은 것들:

GameObject 클래스

클래스 게임오브젝트{ constructor(game) { // 게임오브젝트 초기화 this.x = 0 this.y = 0 this.sprite_img = {파일: 정의되지 않음, 열: 1, 행: 1, fw: 1, fh: 1, 단계: 0, anim_speed: 0, 규모: 1} this.loaded = 거짓 this.game = 게임 this.kill = 거짓 this.collision = 새로운 CollideBox() game.gObjects.push(this) }; setSprite(img_path, 행=1, 열=1, 속도=12, 규모=1) { var img = 새 이미지(); img.onload = () => { console.log("이미지가 로드되었습니다") this.sprite_img = {file: img, col: col, row: row, fw: img.width/col, fh: img.height/row, step: 0, anim_speed: 속도, scale: scale} this.onSpriteLoaded() }; img.src = img_path } onSpriteLoaded() {} draw(context,frame) { // 게임 객체 그리기 함수 if (this.sprite_img.file != 정의되지 않음) { 열 = this.sprite_img.step % this.sprite_img.col; 행 = 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 * 열, this.sprite_img.fh * 행, this.sprite_img.fw, this.sprite_img.fh, this.x, 이.y, this.sprite_img.fw * this.sprite_img.scale, this.sprite_img.fh * this.sprite_img.scale ); if (프레임 % Math.floor(60 / this.sprite_img.anim_speed) === 0) { // 12fps에서만 단계 업데이트 if (this.sprite_img.step box.x && this.collision.y box.y ) } onStep() {}; }

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  box.x &&
            this.collision.y  box.y
          )
    }
    onStep()   {};
}   

게임 클래스

클래스 게임 { 생성자(너비 = 1400, 높이 = 700) { this.gObjects = []; this.toLoad = []; this.timers = []; this.layers = []; this.canvas = document.getElementsByTagName("캔버스")[0] this.canvas.width = 너비 this.canvas.height = 높이 this.context = this.canvas.getContext("2d") this.context.globalCompositeOperation = '소스 오버'; this.inputs = {}; this.mouse = {x:0,y:0} document.addEventListener('keydown', (e) => { this.inputs[e.key] = true; }, 거짓); document.addEventListener('keyup', (e) => { this.inputs[e.key] = 거짓; }, 거짓); document.addEventListener('mousemove', (e) => { this.mouse.x = 예x; this.mouse.y = e.y; }) document.addEventListener('mouseevent', (e) => { 스위치(e.버튼) { } }) } 그리기(프레임) { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); console.log(this.canvas.width, this.canvas.height) for(let i = 0; i { 시계 = 1 for(let i = 0; i 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 box.x && this.collision.y box.y ) } onStep() {}; } 최적화나 기타 오류가 확실히 많지만 모든 것이 작동합니다.

"완벽한!" 나한테 말해줄래?
그건 너무 간단할 것 같아요.

걱정

이 작업을 마치고 이 엔진으로 게임을 만들기 위한 테스트를 시작한 후 동료와의 대화 중에 끔찍한 소식을 알게 되었습니다.

기술 선택이 제가 속한 Zone01 학교의 요구 사항에 맞게 이루어졌다는 것을 기억하실 것 같습니다…

뭐, 선택한 언어는 좋았지만, 프로젝트에 심각한 장애가 되는 지시사항은 몰랐습니다...
Canva 라이브러리 사용이 금지되었습니다!

참고로 이는 이미지를 표시하는 데 사용하는 라이브러리입니다.

다음은 무엇입니까?

이 글을 쓰면서 나는 또한 canva를 사용하지 않고 이 게임 엔진을 완전히 다시 디자인하기 시작했습니다.

이 개발 블로그는 끝났으며 이 이야기의 나머지 부분도 곧 공개될 예정이니 걱정하지 마세요.

다음 개발 블로그에서는 반드시 새로운 형식을 시도해 보겠습니다.

이 콘텐츠가 귀하에게 도움이 되었거나, 즐거움을 주었거나, 최소한 몇 가지 주제에 대해 교육을 하였기를 바랍니다. 오늘 하루 마무리 잘하시고 좋은 코딩하시길 바랍니다.

DevLogs 1.1: 엔진이 완성되었습니다. 어떻게 작동하나요?

이전에

몇 달 전에 저는 비디오 게임 엔진을 만들기 시작했고, 완성했습니다... 꽤 오래 전, Zone01의 몇몇 동료들의 도움으로 우리는 Super Mario Bros에서 영감을 받은 게임을 만드는 데 성공했습니다. Itch.io 페이지입니다.

이 개발 블로그를 신청할 형식을 결정하는 데 많은 시간이 걸렸고, 이 개발 블로그 작성 마감일을 약간 늦추거나 심지어 완전히 밀렸다는 것을 인정합니다.

이 주제에 대해 작업하지 않은 나의 우유부단함을 참을성 있게 변명함으로써, 나는 계획된 출시일로부터 두 달이 지난 후 루앙 버스 정류장의 휴게소에 글을 쓰고 있는 동시에 취소된 기차로 인해 한 시간 더 기다려야 하는 상황에 이르렀습니다.

이제 아키텍처의 모든 세부 사항을 다루겠습니다. 이 아키텍처는 내 개발 블로그의 첫 번째 부분 이후로 거의 변경되지 않았습니다(캔버스 사용을 피하여 적응한 것 제외).

따라서 수행한 프로젝트, 팀으로 일하는 방식 및 직면한 문제에 대해 이야기하겠습니다.
이것을 이 프로젝트에 대한 피드백으로 여기십시오. 이 글에서 귀하의 프로젝트 중 하나에 도움이 될 몇 가지 교훈을 얻을 수 있기를 바랍니다.

프로젝트

이 프로젝트는 최소한 코드 측면에서는 JavaScript로 슈퍼 마리오 브라더스를 다시 만들고 처음부터 시작하는 것이었습니다.

사양은 간단했고, 새로운 레벨을 간단하게 만들 수 있는 방법인 여러 레벨의 마리오 게임이 필요했습니다.

또한 옵션을 조정하기 위해 점수판과 메뉴를 만들어야 했습니다.

이 프로젝트의 어려움은 다음과 같습니다.

화면 요소의 수평 스크롤
화면에 없는 요소 최적화

스크롤하는 이유는 플레이어의 위치를 ​​기준으로 모든 요소가 백그라운드에서 스크롤되어야 하기 때문입니다.

그리고 화면에 표시되지 않는 요소들을 최적화하면 성능 저하 없이 게임을 실행하는 데 필요한 리소스가 줄어듭니다.

이러한 어려움을 해결한 후 우리는 이 게임을 내 itch.io 페이지에 게시하여 직접 테스트할 수도 있습니다.

이것이 이 개발 블로그의 끝입니다. 이제 끝났습니다. 이제 다른 프로젝트 및/또는 다른 주제에 대해 쓸 수 있을 것입니다.

내가 말하는 내용에 조금이라도 관심이 있다면 ​github에서 내 다양한 ​​프로젝트(이 개발자 블로그에 포함된 프로젝트 포함)를 확인하실 수 있습니다.

오늘도 좋은 하루 보내세요!