LittleJS Game Jam and New Logo

Big LittleJS news! We have a game jam announcement, new logo, and some community contributions including an insane rendering speed boost.

Announcing LittleJS Game Jam

First of all I’d like to invite you all to participate in the first LittleJS game jam! It will be an exciting opportunity to unleash your creativity and develop games using the free and open source LittleJS game engine. There has already been great support with 56 people joined with 4 months before it starts. I can’t wait to see what you all make. ๐Ÿ˜…๐Ÿ‘

Introducing The New Logo

Original LittleJS Logo

We have been working on a new logo since last year and just recently unveiled it. The old logo was a simple pixel art train engine I made as an icon for the website. A good starting point, but felt a bit primitive and it was time for a redesign.

The creative process has involved gathering input from the community on discord and a forum post on GitHub. I even used AI to help prototype a few ideas. After many iterations and rounds of feedback, we have arrived at a result that I’m super happy with. One of the coolest things is that it is actually drawn using JavaScript!

This logo is already available in the engine as a optional splash screen that can appear while your LittleJS game is loading. You can see it play when opening the example game.

New LittleJS Logo

Engine Improvements

Finally, there have been a number of improvements to LittleJS over the past few months thanks to help from the community!

  • Rendering Speed Boost: Cody Ebberson worked on switching over the rendering system to use instanced rendering which allows for a major boost. On my computer I can now draw an insane 400,000 fully dynamic sprites at 60fps, while before it topped out around 50,000. That’s an 8x speed boost! You can follow our discussion here.
  • ZzFX Filter Parameter: Dmitry Iv. added low and high pass filters to the ZzFX sound synth, which I also pulled into the latest LittleJS update. This extra parameter really opens up the range of sounds that are possible. You can play with it live in the ZzFX sound designer.
  • Engine Type Info Cleanup: E1e5en has been helping fix up many things, especially the type info which is much improved. A new file called jsconfig.json was added to the project to help preserve type correctness. The documentation has also been updated.
  • Many other users have been helping with feature suggestion and bug reports. Join the discussion on discord and share your ideas!

Thanks for reading

That’s all I have for now. You can star LittleJS on GitHub to get the latest updates, we hope to reach 3k soon!

I’ll leave you with one of the AI generated images I made while iterating on the new logo that I thought was funny. Thankfully people in the forum steered me away from giving the logo a face. ๐Ÿคฃ All aboard the LittleJS express, full speed ahead! ๐Ÿš‚

LittleJS Concept Image Generated by Dall-E 3
Posted in Game Dev, JavaScript | Tagged , | Leave a comment

City In A Bottle – A 256 Byte Raycasting System

Hello size coding fans. Today, I have something amazing to share: A tiny raycasting engine and city generator that fits in a standalone 256 byte html file.

In this post I will share all the secrets about how this magical program works. Here’s my tweet that contains the code and a video of the outputโ€ฆ

You may have already seen this post on my twitter timeline. After I originally released it about 2 years ago it ended up being one of my most popular tweets ever. Thank you for supporting this strange obsession of mine. Keep reading and I will try my best to explain how and why it works the way it does…

Continue reading
Posted in JavaScript | Tagged , , , | 7 Comments

New Piroot Trailer – Happy Pi Day

It’s Pi day and new trailer for Piroot is here and the steam store is officially live! Wishlist it today!

Posted in Uncategorized | Leave a comment

Piroot – An Epic Adventure Game

There’s a new website up for Piroot, the action adventure game that I have been working on for many years. Also, some big news is coming on Pi Day, 3.14!

Posted in Game Dev | Tagged , | Leave a comment

Bitwise ๐Ÿ“ผ Liminal – A Short Film in 256 Bytes

I found an old VHS tape at a yard sale. It was labeled “Bitwise Liminal” in sharpie. But when I watched the video it was only static.

Then I started having vivid and surreal dreams. While awake I couldn’t stop thinking about that weird VHS tape.

After researching I learned it was a digital backup. Using some special software I recovered the data. To my shock, it was a 256 byte program…

With trembling hands I opened it in a web browser. Strange. This reminds me of the dreams I’ve been having.

Now I don’t need to sleep anymore. I just keep watching.

<canvas id=c><svg onload=setInterval("for(t+=.1,R=T=C=Math.cos,c.width=w=128,i=9986,V=t/9&3;Y=i--/w;c.getContext`2d`.fillRect(X,Y,(C(t/6)*T^V*i/1e4*T+t)%20?(R=T++,1):(T=9,19/R),5/Z))for(Z=5,X=i%w+4/R;0<(V*95+C(t/3)+Z*X/64-Z^Z|(60-Y)*Z/58)%13;Z+=.2);",t=9)>
Posted in JavaScript | Tagged , | Leave a comment

LittleJS Engine – Community Game Showcase

It’s been over 2 years since the LittleJS engine was launched and it is still going strong! There have been improvements across the board to make the engine super tight and powerful. To name a few, post processing effects, native wave/mp3 support, typescript compatibility, and NodeJS build system. I also produced a nice intro tutorial to help onboard new users.

In this video we are celebrating some outstanding games made by the community. It is wonderful to see such impressive variety of style and genera in this collection. Here’s to the continued success and boundless potential of LittleJS. Full steam ahead, Choo Choo!

Posted in Game Dev | Tagged | Leave a comment

FxVase – Interactive Pottery Simulation

Sculpt, glaze, and fire your own virtual pottery, then mint it on the blockchain to share with the world! This interactive tool allows for a wide range of expressive sculptures to be rendered in real time and saved in HD. It was written from scratch with vanilla JS and webgl shaders using a rendering technique called ray marching.

Posted in Game Dev, Generative | Tagged , | Leave a comment

Free Workshop: How to make amazing generative art with simple JavaScript code

My workshop from last year’s JS Game Dev Summit is now available for free! This three hour course starts with how to create a basic HTML file and goes to advanced graphical effects by the end. It was recorded live with a class that participated by asking questions which helped guide the talk. It’s a great introduction to making generative art and learning how it works even if you’ve never programmed before!

Posted in Generative | Tagged , , | Leave a comment

JavaScript Haikus: My Adventures in Tiny Code

My talk for the 2023 JS GameDev Summit goes on a 20 minute deep dive into my strange practice of making art with super small computer programs. I hope you enjoy.

Posted in Generative, JavaScript | Tagged , , | Leave a comment

How I made a 1K Pinball Game in JavaScript – Lu1ky Pinball

I’ve made quite a few 1k games now, yet I always find room for improvement and there is so much more to explore in this space. For the JS1024 contest this year the theme was Lucky and I made a tiny pinball machine. It received 1st place in the JavaScript category! I have been wondering for a while how realistic of a pinball sim could be achieved with such a limited amount of code.

This post will walk you through every line for my tiny pinball game that fits in 1 kilobyte of JavaScript. How much is 1k you ask? This much…

for(_='00F*rE8F-7ED/f)*hCin(BMath.AAsB@keyZ1,Y0,XXYWr=V),UUVT-rS69R15Qe. a.f- r-r-=()**Acos(x,y,t, w x ge=n[--;)for();209+=+rw(482(2*h-1)EU+*(1,X9))60	n[h] y=a=>n[Z]=h=2;h*,;rU5Fc.beginPath(c.fill(c.arc(w=(V9)=>n.push({r,g:Xw:0}n=[x=3,1],i=g=X1e3T65{);RY79XX6)}{,816,18WQ+	12W45+	24W45U-21032W70T1Q5F+D+182539,YQT	673,D+*r/38U-*@r/38)V19+Q4R7-754-4EUR7+3FUR0-3E,Y5%3*24438S%9*2W5)}onZdownYonZupXsetInterval(`w=9;w{=Amax(-YAmBYn["zx"[h]]?-.07:.05)T653+65*h],=-+(=482+*(80S/2))U=-+(=7	*@/2)U VQS/8,133],=AmB790,=n.c?.05:@++i)/99+(7	-)/19);width|=2],,.F17,1e3<&&x&&(=RY=74X==Xx--Un.map((a=>{w||x,y,b?--b+r:rUf=Ahypot(y=-x,o=-yTg-,t=w-,0>&0<r*y+t*o&!(t&!)&&(y/f,o/f,f*=f/(t*yS*oUh=!t|b?1.3:(b=9,	0<y||(++g%64||++xU1.7U(r+oC,(t-yC)}))}Vg+8>>32	S%8*2X420+3E,r?9:g%8Vx7	,420+	E,25)`,16)';G=/[- Q-Z@-F]/.exec(_);)with(_.split(G))_=join(shift());eval(_)

That’s how the code looks after being fully minified, though no one would be expected to recognize it at that point. In addition to being minified, it has also been regpacked which is a special tool for size coding that can create compressed JavaScript code that can uncompress itself.

What does it all mean? Keep reading to find out…

Continue reading
Posted in Game Dev, JavaScript | Tagged , , | Leave a comment