Building a game engine in HTML5 in ONE week

[@TerrySznober]

Yes, make some tutorial videos when you're ready. Share the knowledge!

[@orangepixelgames]

It's on my to-do list! 😏

[@jorava8768]

You actually gave some really good points on why to make your own engine instead of just using existing ones. Thank you!

[@orangepixelgames]

Haha well I could probably also make a couple of good points on why NOT to make your own engine 😅. But in some cases, it's good to give it a try!

[@nursultannazarov8379]

Making your own engine is so stupid.

[@HE360]

I totally agree. I like making my own games from scratch. Firstly, its more fun, I learn more and I feel like it gives me more owner of my game to be able to say I made it all, here's the source code to prove it and I just feel better using coding my own games. And yes, game engines ARE bloated and have too much stuff that one's game doesn't need. And hey, after watching this video, I might follow suit and make my game from scratch too.

[@nursultannazarov8379]

When you finish your game engine and start making an actual game other people will release 3-4 games and make tons of money. You are new, you will realize it soon what kind of stupid bs you just wrote.

[@Don-zo3ts]

I use multiple game engines and frameworks and those are great tools but this MAN is Fire 🔥

[@orangepixelgames]

🧯🔥

[@Mikoyan_Felon]

Even though I've already been doing game dev for 7 years, every time I watch your videos I feel like I have just started 😂 . Still so much to learn

[@orangepixelgames]

It's fun to learn new things and open up a new world of potential for your games! And we'll never be done 😁 there's just too much fields of knowledge in game development

[@nursultannazarov8379]

You just have 1 year of experience repeated 7 times.

[@russellwheeler2760]

this is one of your best videos yet! You're really going into how all the things work

[@orangepixelgames]

Trying to balance between not to technical, and still informative 😏

[@russellwheeler2760]

@@orangepixelgames have you got stats on being too technical puts people off/gets lower viewers interaction?

[@orangepixelgames]

@@russellwheeler2760 no stats, but I don't want to be one of those channels :) It's boring to just talk about code and technical things! I'm fairly sure I wouldn't enjoy making those kind of videos

[@russellwheeler2760]

@@orangepixelgames fair enough, but once in a while you could.... 😜

[@crabsoft]

Bloat is real. Respected and subbed~

[@orangepixelgames]

👊

[@IraKane]

I've already said this some time before but, you are my hero. I wish I had the knowledge you have. I guess life happened, I got late to the party and just jumped into engines that give me everything set and done. Thanks for sharing! Any tutorial you may do will be interesting for sure😊

[@mohamedelhawy4124]

Love it. Completely agree. I am a web developer who also working on creating metaverse engine for the web using pure web-tech-stack. I feel so happy that someone who is experienced like you realized also the potential and power of the web as a graphics powerhouse. Best of luck,

[@bobbygeneric9396]

You are smart to have your own engines

[@orangepixelgames]

Perhaps.. that or foolish 🤔

[@nursultannazarov8379]

Not really. He is making HTML5 games. It's the lowest low.

[@Zodiacman16]

I am actually making my own game engine. Not because I want lightweight, but because I'm too damn picky to use one of the existing ones. I just like having control and knowledge of the codebase.

[@BeTwoOFor]

This is the way. LibGDX is great.

[@orangepixelgames]

I fully understand!

[@nursultannazarov8379]

Very very bad decision you will regret in the future.

[@tonybarnes2920]

I've literally been told, "STFU" when I try to talk to developers about optimizations, so I've stopped bothering.

[@orangepixelgames]

They don't understand!

[@tonybarnes2920]

@@orangepixelgames So very true. People ask me how I've been able to make games for so long and I tell them, "passion, perseverance and knowing that I don't know." I wake up every morning thinking, "what am I going to learn new about game dev, today?!?" and I've been doing this 40 years. I'm always willing to listen and learn, otherwise what's the point? That's why I sub to you, Pascal... always good to listen and learn.

[@nursultannazarov8379]

@@tonybarnes2920 You need to learn to talk to people if they told you STFU. It takes special kind of person to be told STFU. Problem is maybe you?

[@mallix-011]

What about pixi.js as the WebGL renderer, instead of a full framework like Phaser?

[@orangepixelgames]

I just wrote my own webgl handling things, so no need for either of those 😏

[@itsjustbusiness1989]

The whole point of using a game engine is to have all that boiler plate code done for you so you can focus on what matters the most: Making a game. Obviously you're not gonna know what the code is doing behind the scene(unless you're an open source engine like Godot) cause, well, you don't need to. That's not what you came to a pre-made engine for. The only reason someone would want to make their own engine is if they want more control, for practice/to learn, if they're used to manually typing code, or simply because they can. There are many reasons to make your own engine much like there are many reasons not to do so. It's just a matter of preference and neither one is better than the other.

[@orangepixelgames]

Fully agree! However the understanding basic optimization and processor costs on certain operations is what seems to be getting lost due to many people just jumping into these tools and not grasping what happens and what's needed. So it runs in their system, but they run into many issues releasing it in the wild to "lesser" system configurations.

[@russellwheeler2760]

Tutorials YES!!!! And open source that framework!! Wooooo

[@stevenbc9597]

Sounds like you are doing an awesome job there.

[@orangepixelgames]

Hope so!

[@jacobkirkbride1581]

I am also someone who believes in owning your own code and building only what you need. I generally use like MonoGame/FNA as a base for desktop, mobile, etc. Sounds cool to build a web framework variant!

[@orangepixelgames]

My Switch versions run on a Monogame version of my Framework. .. and yeah, long story on why I'm still not using those builds for PC and mobile 😅

[@JediMB]

I've wanted to get into game development for 20 years, but I've let self-doubt and other things get in my way. I've produced some GZDoom mods and an ASCII-based blackjack app in the last few years, though. I'm also working on getting a website up and, aside from being a demonstration of my web development skills, that should also serve as a motivator and platform for HTML5/JS games. Just simple, incremental things so I can actually get going.

[@orangepixelgames]

Go for it! Game development is still the most fun and all-rounded you can get as a developer/programmer. Even if just as a hobby !

[@scottwilliams1902]

I agree with making your own framework. Future projects will be much easier to create/port. Also you won't hit a brick wall where you can't implement something because the engine doesn't support it. I ponder looking into using Unity or Gotot etc now and again, but I always end up thinking that by the time I have learned an engine I could have at least one game written. If I were a team building huge 3d games I would use an existing engine.

[@orangepixelgames]

Totally agree with all of that. Also looked at those tools a few times, but never want to dive into that workflow..

[@nursultannazarov8379]

Stupid reasoning.

[@MxzStudio]

I love your video they are so good!

[@orangepixelgames]

Thanks!

[@iainkey5102]

Next week on Orange Pixel Games: I've rewritten the whole of Unreal Engine with HTML5 and a toothpick. Seriously though nice work! Sounds like you're really enjoying the project Years ago I was making my own engine, it was great fun and very interesting but I found I spent more time perfecting the engine and not working on the actual games! Of course, using other people's engines like Unity means you spend more time trying to figure out how other people have implemented stuff and not working on the actual game too 🤣

[@orangepixelgames]

Ha! The Unreal engine is powered by dark magic (I'm pretty sure about this!). My skills wouldn't come closer to it. But I do know not to fall into the 'build tools without games' trap 😁 if the basic stuff runs, I'm good to go!

[@iainkey5102]

@@orangepixelgames Dark magic and Tim Sweeney’s tears are a powerful combination! 🤣 yes unfortunately I’m very prone to over thinking and perfectionism when it comes to the engine side! Even with my *cough* many years of experience! 🤣

[@4bclover]

more vids like this, like it a lot! ignore all engines create your own, I like that approach a lot. Understanding SpriteBatch, Font rendering etc is more fun than using someone else solution. But I have question why did you not use LibGdx to create Web version of your games?

[@orangepixelgames]

Few times that I tried Libgdx, web export ran into unsupported Java code I had. And I don't use weird code! Most of the times it simply never works for me.

[@RichardBurcher-c1u]

would love to see a tutorial series

[@orangepixelgames]

Noted!

[@richardvanzon]

Hi Pascal, great video, as always. Great work! Don’t know if the code at 11:37 is actual, but as childNodes[] is a live nodeList the current set of child nodes will be fetched by the DOM parser at every call. Storing it as a reference like “let currentCharNode = chars.childNodes[i] prevents this. And is arguably easier to read. But moving this code to build time using Nodejs, by converting the characters object to JSON (JSON.stringify) and parse it again with a single JSON.parse() at runtime (preferable using a frontend build tool like Vite) will make it more portable, easier and faster IMO. Also, better always use “let” (and const) nowadays as it’s block-scoped and not function-scoped like “var”.

[@orangepixelgames]

Wrote it pretty quickly, so will check if that code is still like that 😁 and probably can do with a few more optimizations down the road. It was really the first attempt at getting fonts to work, and was not expecting it to work at all!

[@SlateFireGames]

Ok, take my money. I had worked with Gdevelop and other frameworks and I have years of experience. And I get stuck with functionality not working or performance. I would like to see your framework and tutorials etc.. Great information and I can hear that you are experienced. I think doing something from scratch so to speak is important and ultimately give a developer more power to do exactly what they are wanting( NEEDING! ) in a game.

[@orangepixelgames]

Understanding the basics on building games , I believe, also make for better game developers when you jump over to other engines or tools later on. Tutorial videos are on my to-do list!

[@sylvainschellenberger]

Good job on building your own game engine. Although, how do you know when you're "done" with it?

[@orangepixelgames]

When the core stuff is running, and most of that was already done as shown in the video. That's how I also do my PC, mobile and console games. No full engine, just a framework for rendering, input, audio and all other 'utility' stuff will build itself over time as I create games and copy paste code from one to the next. If it runs, it's good to go!

[@simonairey8982]

Great video. Very insightful. I worry about the deskilling of humanity in general. Fewer and fewer people know how things work. We are so used to things being disposible and you just get a new one when something breaks. It will get to the point where there is noone left who knows how things work to be able to make anything new. People think AI will be able to do all of these simpler tasks, but it can only learn from what alredy exists. It can't really iterate or innovate, the same way humans do. I too just hope there are keen young people around who want to learn and discover for themselves. There always have been throughout hostory, so I am sure that will continue in some form.

[@orangepixelgames]

Education , skill sets, and critical thinking do really seem to be taking a wrong turn in general.

[@chrislagos44]

Gunslinger looks like a cool little game. Did you use the canvas draw commands for anything OR is everything a PNG

[@orangepixelgames]

All PNG images (aka sprites). I might have squeezed some rectangle fill things in there, but font and everything else are PNG images

[@andreirudenko]

There is interesting technology like Haxe language with Kha framework, its lightweight and low level with some high level like g2 graphics features, but supports many targets (web, mac, windows, linux, playstation, nintendo switch), and the language itself is very java like and generates very small js code compared to other translator like languages. Im using it for my personal game framework and projects, and its wonderful, you can make you own sprite batchers, 3d, 2d, whatever.

[@orangepixelgames]

There are many options out there. I chose JavaScript for this project 😁

[@andreirudenko]

@@orangepixelgames Yeah, thats totally makes sense, native language for a platform is always better when you want to get maximum from the platform. And thanks alot for inspiration, so cool that there are still people who are making games their own way, by making game specific code for a framework and not using bloated general purpose engines. Engines are great, but its so fun when you are making custom tech for a game, it feels more personal I would say.

[@OxAA00]

Super interesting! I also am working on a cross-platform framework. I use raylib as basis and compile the game to webassembly with emscripten. That way I can test it locally and can upload demos for other to play to the web. I'm currently trying to make it more responsive for mobile devices.

[@orangepixelgames]

Looked at webassembly a bit, sounds interesting! But was out of my timeline/scope for this project 🙃

[@mandisaw]

​@orangepixelgames I would recommend trying to get WebAssembly working, when you have some time. Would really open up some constraints, esp if the plan is to branch out to other types of games.

[@bridgersilk]

I would really appreciate some tutorials for that :)

[@orangepixelgames]

Hope I'll get around to making some!

[@markguyton2868]

I can't even figure out code when it's been simplified on an engine, so even though it would be nice to build an engine of my own (especially with all the weird controversies rising with the engine companies) I kinda know that's not an option based on my abilities.

[@orangepixelgames]

Might not be for everyone, but just toying around with the more basic/core stuff of programming games could give more insight and knowledge about the more difficult things

[@markguyton2868]

@@orangepixelgames True

[@williamtucker3700]

One should enjoy the craft element of building one's art, it really tests one. Informative explanation on the plumbing for your html5 game engine. Forget the tutorials for the wannabes, there are plenty on the Internet. Basically you are not hardcore unless you work hardcore. To design, build and release a game you need to be hardcore!

[@orangepixelgames]

🤘🤓

[@boukew]

Thanks for sharing. I have been planning my own game with just JS. Not sure what it is that makes me uninterested in using libs, maybe the flat culture, but usually i just find 1 piece of code in there which i need. Then i just copy that instead of the whole lib😅. And JS seems great because all the devtools are already installed! There is even a code editor in chrome nowadys.

[@orangepixelgames]

Yeah and no compile times either! 😁

[@geams]

Did you ever play around with solar2d (aka corona sdk)?

[@orangepixelgames]

Nope, not that I recall

[@jochenpanjaer980]

How do you feel about your job potentially getting replaced by ai? Do you embrace it and try to find a new way to make money or are you going to fight it?

[@orangepixelgames]

By the time that AI is capable of coming up with creative ideas of it's own, I'm probably retired ;) AI right now looks impressive, especially with art and video, but let's not forget it's "only" copying and pasting things that exist and melting it into something new. It's not capable of coming up with it's own ideas and it's actually often making mistakes - which it doesn't correct because it doesn't really think for itself or learn. It's not the AI we know from the movies.. Maybe in one or two decades? So yeah I do keep an eye on how things go, and I'm not against using it at some point, and newer developers at the start of their career should really keep an eye on it! but right now, it's not a replacement for what we do yet Once it is.. I think all jobs are at risk anyway :) so that's another world problem to be solved and not by us!

[@jochenpanjaer980]

@@orangepixelgamesi understand that ai is not there “creatively”. But you mentioned doing third party work. What if they just let ai write the code and just paste it together?

[@orangepixelgames]

@@jochenpanjaer980 I'm not doing 3rd party work yet, might do it for Web games at some point. And AI can create some simplistic games, but it will still require a lot of work and human interaction to make it a releasable game. I'm just not worried about it for now, it's merely a tool that you could use, but doesn't replace human creativity and intelligence for the next few decades

[@oleksandr.kryvonos]

Hello, did you consider to build for WebAssembly, this way your code will be more protected than JS?

[@orangepixelgames]

Have looked at it, but not so worried yet about my code being stolen.. we'll see!

[@SirArtanis7]

Personally I am i interested in making my own game engine, I hear CD Projekt Red is in trouble because everyone that is currently there are new and don't know the in-house game engine

[@orangepixelgames]

I can imagine that happening, and most game companies using Unreal or Unity won't have the knowledge available for when these tools ever stop updating. Might be many decades from now, but that will only increase the problem.

[@mandisaw]

That's down to a management failure then. If you have your experienced people train the juniors, especially on in-house tech, then you shouldn't be caught-out like that. Sometimes the issue isn't technological 😅

[@ourabig]

for future should i still learn webgl or go with webgpu instead

[@orangepixelgames]

I'd learn both of them. Webgl right now is still better supported in browsers I believe. Shouldn't be a huge step to move to webgpu overtime once you know the basics

[@gabrielribeiro5192]

I got your point of view, but the internet is so fast nowadays, in some places in Japan, it surpasses 1gb of connection; also, the hardware is so fast, no need to make a game so tiny; if a game would be made 1gb in 30 days, its better than making all the compatibility yourself in 3+ months,

[@theartworkhub]

For example, Poki has a maximum file size, and maximum objects that can be submitted in a game. And you'll be shocked how many users are using ancient hardware especially kids in school.

[@gabrielribeiro5192]

@@theartworkhub this much effort to earn 200$ from poki, not worth at all

[@orangepixelgames]

I get your point of view, but that's exactly what makes me sad about the new generation of developers 🙃

[@gabrielribeiro5192]

@@orangepixelgames sometimes you don't need a cannon to hunt a bird. Only a slingshot, i guess creating a engine is super overpowered, no need that much to make a cross-platform game

[@orangepixelgames]

@@gabrielribeiro5192 I think in this case tools like Unity or Unreal are the cannons ;) This video's focus was for html5 games.. most of those are fairly small, casual, snacks and not big 3 course meals.

[@thenamelessdev]

are you concerned with your code being stolen?

[@orangepixelgames]

No, the code is not that important.

[@thenamelessdev]

@@orangepixelgames I saw someone’s passion project get ripped off bc the bad actor took and reskinned a few things and called it his own.

[@orangepixelgames]

@@thenamelessdev it sometimes, but rarely, happens I guess

[@nursultannazarov8379]

I will steal it. Hahhahah.

[@signalised9540]

First 😮

[@orangepixelgames]

🤘