Binary Serialization and Pixel Art in C and OpenGL | Game Engineering

Discussing "Binary Serialization" and demonstrating its use in a small, custom pixel art editor using C and OpenGL.
Be sure to like and subscribe. That way I can continue to make more content like this.
Gunslinger:
github.com/MrFrenik/gunslinger/
Nuklear UI:
github.com/vurtun/nuklear

[@TheMightyKiD38]

Not only you're good at coding, you're also great at painting!

[@zachary_newsom]

Glad to be recommended such a quality channel

[@johnjackson9767]

Thanks, Zachary!

[@bruno.myrrha]

Another channel that should have more subscribers

[@johnjackson9767]

I agree

[@shadowfoxxie7182]

used this video to help me develop a custom 3d model format for old consoles like sega saturn and psx

[@johnjackson9767]

based

[@gabrielsilverio1192]

"This particular scenario shares something in common with most applications we all use on a daily basis" Crashing? "Serialization" Ah

[@xylvnking]

I'm never gonna do this but i like to watch

[@musashi542]

lmao

[@dingalong14]

The motion graphics are very pleasant to look at, the code snippets are neat and easily readable, and the explanation clear, consise, and informative. Phenomenal job.

[@johnjackson9767]

I appreciate it, thank you!

[@bmorr]

This series seems like it’s dead, but it’s really good and I would love if it got continued!!!

[@johnjackson9767]

Currently writing a script for a new video. Join the discord, we're active in there daily.

[@dleiferives]

You are so... gosh darn wonderful. Thank you for the awesome content.

[@johnjackson9767]

Thanks for the comment and kind words.

[@Miziziziz]

Another quality vid!

[@johnjackson9767]

Thanks, man!

[@GuilhermeTeres]

Finally someone that can actually explain this topic in a good manner! Thank you a lot for that.

[@WesleyLaFerriere]

These videos are excellent. I hope you get the recognition you deserve!

[@willolia]

just watched this and fell in love with your channel! So excited to binge the rest of your vids

[@Will-Eves]

Bro! This is such high quality stuff. Keep doing what your doing

[@davedave9]

I think that this series has the potential to get you to 100k subs subs very fast, the level of quality is really outstanding.

[@rudyfaile]

Excellent video. Well explained and super high fidelity! Can't wait to see more.

[@chillydill4703]

Just found your channel and 2 min in, this is fantastic how to explain complex topics with ease.

[@xiaotiandai]

Thanks for making this video. Very entertaining to watch. Keep going.

[@jeremywinters1628]

I just wanna say that this is a gem of a video and that I am thankful for the KZbin algo for leading me here

[@johnjackson9767]

Thanks, and Merry Christmas

[@TheEricon]

Short and sweet! Thx for posting, it was very educational.

[@jhok2g542]

Awesome video! You deserve a lot more views!

[@rasool2753]

i like your funny words magic man

[@MrDaanjanssen]

pretty nice pixel art as well

[@botbeamer]

Great channel man 👍

[@connorboughton3162]

Great video!

[@vertexbyte9469]

Great video.

[@petermaltzoff1684]

Tubular video my dudsen!

[@jackgruber7811]

This is amazing!! What software do you use for the graphics?? (Like, the infographics you’re using to explain the concepts). Amazing video by the way! I hope to see many more!

[@johnjackson9767]

Thanks! For this one I used Photoshop to do the animations.

[@yoctometric]

really cool!

[@j5d1c73]

great stuff, i bet you could easily use this format to make a timelapse of the art you created - instead of playing back all of the actions instantly to create the final product, you could play them back with a delay and watch the art get created.

[@johnjackson9767]

That's a great idea. This video idea actually came from a video idea I had for explaining Braid's rewind mechanic, which is fairly similar to what you're describing.

[@toddseiler]

@@johnjackson9767 Are the compressed set of actions used to generate the image smaller than the image itself? Curious.

[@johnjackson9767]

Is this Todd from NK? If so, good to hear from you again, man. For the general case, yes, they tend to be smaller. Worst case scenario would be a fill action, where all pixels are changed. In that case, the action data plus pixel data would be larger. For that specific case, a custom action could be defined, or another form of RLE compression could be used on top to ensure a smaller data footprint.

[@erlend1587]

Great content. Maybe you could make a cross platform sprite editor from this? :D

[@hemartej]

Hello! I've been quite attached to these videos since the Noita-esque sandbox :D. Around 2:44, shouldn't the size of the read data also factor in num_comps (i.e. width*height*num_comps*sizeof(color))? Maybe I didn't interpret correctly the meaning of num_comps.

[@johnjackson9767]

In this case, the size of the color struct is the same as the number of components (since it's 8 bit color data)

[@skaruts]

Maybe you can help me with something else here: I've been through several attempts at doing map editors, and every time I tend to think of the drawing tools as classes in themselves, but this always seems to lead me to roadblocks, where I can't quite make sense of how they work with the rest of the code. The only time I successfully did this kind of thing I did it much simpler. It was in a Game Of Life with some drawing tools (brush, line, circle, fill..) that I made for the TIC-80, and on that one the tools are actually just kind of conceptual: it's just a bunch of loose functions that work with the same base drawing code and data-structures, but use it through a different process. The thing is, I've always thought that doing it like that was just a quick&dirty way of keeping my code below the limit token count of the TIC-80, but now I'm starting to think I'm actually trying to over-engineer my other attempts at this, and maybe tools don't have to be anything complicated...

[@ust8011]

soo cool

[@osteon1992]

Damn this is good. What’s your experience in programming or how did you learn all of these? I just graduated and can’t even think a quarter of the ideas given here

[@johnjackson9767]

Thanks for the comments. A lot is self taught, a lot from on the job. Was an engine dev for an indie company while in school. Currently still doing engine related work.

[@osteon1992]

@@johnjackson9767 Thanks for replying. Last question, any resources like books or websites you can point me to for engine dev or graphics programming? I'm comfortable with c/c++

[@johnjackson9767]

@@osteon1992 LearnOpenGl.com is a great resource for getting started with graphics programming.

[@skaruts]

Should the undo-redo execute the redo action when you create a new state, or should it just store it while you execute the action? In godot engine it executes it, but in the map editor I'm making I decided not to do that because I didn't quite figure out how to merge undo-redos when painting tiles (which works much like a paint brush in a drawing app). But I'm a bit fearful of adding undo-redo's all over the place and then running into problems that'll force me to change things drastically...

[@johnjackson9767]

I'd be able to give you more guided feedback and help through discord than through YT comments.

[@oolmfoxz8170]

interesante stuff to exeplain are the nbt/fakestream/tar/xz format...

[@kyonas6047]

oooo drawing tool... dayum

[@shankar4510]

hi i am overwelmed by the options. what do you advice to a beginner who wants to learn graphics in c

[@johnjackson9767]

I should do a small tutorial series and start pointing people to that. For now, I'd recommend, if you're a beginner, get very comfortable with c. Then go to learnopengl.com to get the basics of opengl. It's a c++ tutorial, but you should be able to apply the basics of the API to whatever you're doing in c.

[@shankar4510]

@@johnjackson9767 i was learning win32 api but overwelmend so i am taking it slowly figuring the details. what i really want is a framework where i could just draw pixels in window screen with minimum cpu usage and of course in clanguage. Is gunslinger that~

[@johnjackson9767]

@@shankar4510 Yes, gunslinger is all written in c99 and is aimed at being just that. It handles all of the drudge work of setting up platform, audio, and graphics layers for you (which is usually a lot of boilerplate code), and it provides a small layer above those layers for interacting with them in an platform-independent way. I've recently added more "immediate mode" drawing to the graphics subsystem, so doing very quick and easy drawing (such as single pixels to the screen) is possible. Join the discord to get regular updates and help with it if you're interested in checking it out. I plan on making it more widely used in the near future with a scheduled game jam.

[@linuxterm7622]

Great video now Cherno wont kill you and your family

[@johnjackson9767]

Praise him.

[@philtoa334]

Good.

[@johnjackson9767]

Your comments are my favorite.

[@philtoa334]

@@johnjackson9767 Good , thank for your works it s really interesting .And have a really good style . Clever 'n well appareanced.

[@dirtymint]

What is the font that you use in your code examples (not in the actual text exitor)?

[@johnjackson9767]

For this it was just the default font provided with Nuklear UI (link in description). Font is called 'proggy clean'. Can find it here specifically: www.dafont.com/proggy-clean.font

[@dirtymint]

@@johnjackson9767 Thank you for your help - I meant the font you use to explain things like your byte_buffer struct at 1:51, the letter 'i' isn't the same. It's ok if you don't know, I'm sure I could find similar. I just liked the DOS feel of that one.

[@johnjackson9767]

@@dirtymint Oh, I misunderstood. I can't quite remember, I made the animations in Photoshop, so I used one of the fonts available in there a so it should be a standardly available font if you're on Windows.

[@MangoDev_]

It looks like the old bitmap command prompt/terminal font (I think it's just called Terminal)

[@Synapse-id6ej]

What window's version do you use?

[@johnjackson9767]

7

[@GuilherminoBr]

@@johnjackson9767 giga chad

[@sofboiquiet]

@@johnjackson9767 That's so based

[@cowdev]

What code editor are you using?

[@johnjackson9767]

Sublime Text 3.0 like a boomer :)

[@cowdev]

@@johnjackson9767 I really liked the video. I learned a lot from it. :)

[@kamalmoustafa318]

This is beautiful. But i still don't understand how to write serialisation in c++ , and i found no good tutorials in yuutubbb...

[@johnjackson9767]

Join the discord in the link.

[@pixellino5009]

@@johnjackson9767 i can't find it

[@ThankYouESM]

How can I bind this buffer with Python to load the images from much faster?

[@thatisit1570]

Refactor the code in python or just use the compiled C++ program as an external routine

[@raqqa5535]

What purpose serves the do while loop when you define a generic function? I can only imagine it's there so everything in the macro expands in it's own scope, but for this isn't just { } enough? Amazing video and painting skills btw

[@johnjackson9767]

The purpose of the do-while wrapping of multi-line macros is so they can safely appear inside of statements that require single-statement expressions, such as an 'if'. Without the do-while, it'd be impossible to use them as function arguments. Thanks for watching, glad you enjoyed it.

[@raqqa5535]

​@@johnjackson9767 Thanks to you!

[@Kenbomp]

Didn't explain very well the actual code to what the brush paint did

[@segsfault]

it just puts pixel wherever the mouse is clicked...

[@DariuszMakowski]

Yo, awesome vid! Few pointers tho... int8_t = -127 to 127 uint8_t = 0 to 255.

[@QuadHealer]

Good comment, but a signed 8-bit value has a range of -128 to 127, not -127 to 127. See e.g. www.tutorialspoint.com/c_standard_library/limits_h.htm. It makes sense if you think about it: The numbers -127 to -1 is 127 numbers in total, 1 to 127 is 127 numbers in total and 0 is one number, which gives 127+127+1=255 numbers, which is one short of 2^8=256.