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

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

이 위대한 모험에 대한 소개

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

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

그러나 사실 이것들은 제가 베이스로 선택한 언어가 아니며, 이 언어가 완성된 후에는 반드시 다른 언어로 이런 유형의 다른 모험을 시작할 것입니다.

건축학

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

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

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

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

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

며칠 후에는 지정된 속도로 애니메이션을 표시하고 CollideBox를 통해 충돌을 감지할 수 있습니다.
그리고 아래에서 볼 수 있는 다른 많은 좋은 것들:

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()   {};
}   

게임 수업

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
    }
}

최적화나 기타 오류는 확실히 많지만 모두 작동됩니다.
"완벽한!" 말해줄래?
너무 간단할 것 같아요.

걱정

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

제 Zone01 학교의 요구 사항에 맞춰 기술 선택이 이루어졌다는 것을 기억하실 것 같습니다…
뭐, 선택한 언어는 좋았지만, 프로젝트에 매우 심각한 장애가 될 지시사항은 몰랐습니다...
Canva 라이브러리 사용이 금지되었습니다!

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

다음은 무엇입니까?

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

이 개발 블로그는 끝났으며 이 이야기의 나머지 부분도 곧 공개될 예정이니 걱정하지 마세요.
다음 개발로그에서는 반드시 새로운 형식을 시도해 보겠습니다.

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

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

이전에

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

이 개발 블로그를 신청할 형식을 결정하는 데 많은 시간이 걸렸고, 이 개발 블로그 작성 마감일을 약간 늦추거나 심지어 완전히 밀렸다는 것을 인정합니다.
이 주제에 대해 작업하지 않은 것에 대한 우유부단한 변명을 참을성 있게 받아들이면서, 나는 계획된 출시일로부터 두 달이 지난 후 루앙 버스 정류장 휴게소에 글을 쓰고 있는 동시에 취소된 기차로 인해 한 시간 더 기다려야 하는 상황에 놓이게 되었습니다.

따라서 아키텍처의 모든 세부 사항은 무시하겠습니다. 이 아키텍처는 내 개발 블로그의 첫 번째 부분 이후로 거의 변경되지 않았습니다(캔버스 사용을 피하여 적응한 것 제외).
따라서 수행한 프로젝트, 팀으로 일하는 방식 및 직면한 문제에 대해 이야기하겠습니다.
이 글을 이 프로젝트에 대한 피드백으로 삼으시고, 귀하의 프로젝트에 도움이 될 몇 가지 교훈을 이 글에서 얻으실 수 있기를 바랍니다.

프로젝트

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

사양은 간단했습니다. 여러 레벨이 있는 마리오 게임이 있어야 했고, 이를 통해 새로운 레벨을 간단하게 만들 수 있었습니다.
또한 옵션을 조정하기 위해 점수판과 메뉴를 만들어야 했습니다.

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

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

플레이어 위치를 기준으로 모든 요소가 백그라운드에서 스크롤되어야 하기 때문에 스크롤합니다.
그리고 화면에 표시되지 않는 요소들을 최적화하면 성능 저하 없이 게임을 실행하는 데 필요한 리소스가 줄어듭니다.

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

이렇게 개발 블로그가 끝났습니다. 이제 끝났으니 다른 프로젝트 및/또는 다른 주제에 대해 쓸 수 있겠네요.

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

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

위 내용은 Devlog - 게임 엔진을 만들고 있어요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!