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 페이지입니다.

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

Jadi mari kita abaikan semua butiran seni bina, yang ini telah berubah sangat sedikit (selain daripada penyesuaian dengan mengelakkan penggunaan kanvas) sejak bahagian pertama devlog saya.
Oleh itu, kami akan bercakap tentang projek yang dijalankan, cara kami bekerja sebagai satu pasukan dan masalah yang kami hadapi.
Lihat ini sebagai maklum balas tentang projek ini, dan saya harap anda akan dapat mengambil beberapa pengajaran daripada penulisan ini yang akan membantu anda dalam salah satu projek anda.

Projek itu

Projek ini adalah untuk mencipta semula Super Mario Bros dalam JavaScript dan bermula dari awal, sekurang-kurangnya dari segi kod.

Spesifikasinya mudah, kami perlu mempunyai permainan Mario dengan beberapa peringkat, cara untuk mencipta yang baharu sahaja.
Kami juga terpaksa mencipta papan skor dan menu untuk melaraskan pilihan.

Kesukaran projek ini ialah:

• Tatal mendatar elemen pada skrin
• Pengoptimuman elemen yang tiada pada skrin

Menatal kerana ia memerlukan semua elemen untuk menatal di latar belakang berbanding dengan kedudukan pemain.
Dan mengoptimumkan elemen yang tidak dipaparkan pada skrin membantu mengurangkan sumber yang diperlukan untuk menjalankan permainan tanpa kehilangan prestasi.

Selepas menyelesaikan masalah ini, kami menerbitkan permainan ini di halaman itch.io saya di mana anda boleh pergi dan mengujinya.

Begini cara devlog ini berakhir, kini selesai saya akan dapat menulis tentang projek lain dan/atau subjek lain.

Jika anda berminat sedikit pun dengan apa yang saya beritahu, anda boleh pergi melihat projek saya yang berbeza (termasuk projek dalam devlog ini) di github.

Selamat berehat sepanjang hari!

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