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

Saya sedang mencipta enjin permainan!

Pengenalan kepada pengembaraan hebat ini

Selama beberapa minggu sekarang saya telah bekerja secara tetap pada projek yang saya rasa mungkin menarik untuk dibincangkan, penciptaan enjin permainan video saya dalam JavaScript dan HTML5 berdasarkan kanvas.

Anda mungkin tertanya-tanya mengapa anda memilih HTML5 dan JavaScript untuk mencipta permainan video? Jawapannya kurang menarik daripada soalan, ia adalah persaingan projek yang diperlukan untuk sekolah saya (Zone01 Normandie) dan fakta bahawa bahasa mempunyai segala yang diperlukan untuk melaksanakan projek ini yang menyebabkan saya memilih teknologi ini

Tetapi sebenarnya ini bukanlah bahasa yang akan saya pilih sebagai pangkalan dan saya pasti akan memulakan pengembaraan lain jenis ini dengan bahasa yang berbeza selepas pemuktamadan yang ini.

Seni bina

Jadi saya perlu bekerja mereka bentuk enjin permainan video saya, ia akan terdiri daripada beberapa kelas termasuk sekurang-kurangnya dua kelas utama: Kelas Permainan yang akan menguruskan keseluruhan kawasan permainan dan kelas GameObject membolehkan anda menjana objek dalam permainan kami dan menjadikannya berinteraksi antara satu sama lain.

Ke kelas ini saya akan menambah kelas CollideBox yang akan membolehkan saya menguruskan kotak perlanggaran semua objek.

Kelas Permainan mempunyai kaedah GameLoop yang akan dilaksanakan pada setiap bingkai(imej) permainan, kaedah Cabutan yang akan dipanggil semasa setiap gelung permainan.

Bagi kelas GameObject, ia mempunyai kaedah Step, dan kaedah Draw.

Yang pertama melaksanakan setiap pusingan gelung permainan dan yang kedua setiap kali kaedah Cabutan kelas GameLoop dipanggil.

Ini membolehkan anda membuat permainan secara teori dengan mengimport modul Enjin ke dalam projek.

Untuk memaparkan sprite saya memilih untuk menggunakan API canva yang terbina dalam HTML5 (terbina dalam bermakna ia disertakan secara lalai)
Ia akan membolehkan saya memaparkan semua sprite dan memotong semula imej untuk mencipta animasi yang akan sangat berguna kepada saya!

Selepas beberapa hari saya dapat memaparkan animasi, pada kelajuan tertentu, dan mengesan perlanggaran melalui CollideBoxes saya.

Dan banyak lagi perkara menarik yang saya akan biarkan anda lihat di bawah:

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

Kelas Permainan

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

Sudah tentu terdapat banyak pengoptimuman atau ralat lain tetapi semuanya berfungsi,

"Sempurna!" boleh awak beritahu saya?
Itu terlalu mudah.

Kerisauan

Selepas menyelesaikan ini dan mula menguji keadaan untuk mencipta permainan dengan enjin ini, saya mendapat berita buruk semasa perbualan dengan rakan sekerja.

Saya bayangkan anda masih ingat bahawa pilihan teknologi yang dibuat dibuat untuk memenuhi keperluan sekolah Zone01 saya…

Sememangnya bahasa yang dipilih adalah baik tetapi saya tidak mengetahui arahan yang akan menyebabkan projek ini menjadi sangat serius…
Kami dilarang menggunakan pustaka Canva!

Sebagai peringatan, ini adalah perpustakaan yang kami gunakan untuk memaparkan imej kami.

Apa yang seterusnya?

Semasa saya menulis teks ini, saya juga mula mereka bentuk semula sepenuhnya enjin permainan ini, tanpa menggunakan kanvas.

Devlog ini telah tamat dan anda akan mempunyai cerita yang lain tidak lama lagi, jangan risau.

Untuk devlog seterusnya saya pasti akan mencuba format baharu.

Berharap kandungan ini telah membantu anda, menghiburkan anda atau sekurang-kurangnya mendidik anda tentang beberapa subjek. Saya ucapkan selamat penghujung hari dan pengekodan yang baik.

DevLogs 1.1: Enjin sudah siap, bagaimana ia berfungsi?

Sebelum ini

Beberapa bulan yang lalu saya mula mencipta enjin permainan video saya, saya telah menyelesaikannya... Tidak lama dahulu, dan dengan bantuan beberapa rakan sekerja dari Zone01 kami juga berjaya mencipta permainan yang diilhamkan oleh Super Mario Bros yang tersedia pada saya Halaman Itch.io.

Memutuskan format untuk memohon devlog ini mengambil banyak masa, dan saya akui saya melengahkan sedikit atau malah menolak sepenuhnya tarikh akhir untuk menulis yang ini.

Dengan sabar mengambil alasan keragu-raguan saya untuk tidak mengerjakan subjek ini, saya kini mendapati diri saya dua bulan selepas tarikh keluaran yang dirancang menulis di kawasan rehat stesen bas Rouen manakala kereta api saya yang dibatalkan memaksa saya menunggu satu jam tambahan.

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

프로젝트

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

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

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

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

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

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

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

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

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

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