timetocode.tumblr.com Open in urlscan Pro
74.114.154.18  Public Scan

Form analysis
0 forms found in the DOM

Text Content

1,5 Millionen Bewertungen
277 Tausend Bewertungen



SIEHST DU, DAZU EIGNET SICH DIE APP PERFEKT.

Klingt perfekt Bäääh, das will ich nicht


TIMETOCODE

A blog about game development and procedural content generation.

This is the blog section of timetocode.com

alex@timetocode.com | Tumblr ask | @bennettor

 * Einträge
 * Favoriten
 * Message me
 * Archiv


HOW TO MIX VUEX / VUE WITH HTML5 GAMES




Do you want a vue ui mixed with Babylon.js, Three.js, PIXI.js, canvas, Webgl,
etc? Or maybe just to store some variables… or make reactive changes? Here’s how
it works in a few of my games…

There are 3 main points of integration. These are mutating state in the store
(writing to a variable in the store), reading state from the store (accessing
the store variables from other places), and reacting to changes in state
(triggering a function when a value in the store changes).

First, how do you expose the store? Well you can literally just export it and
then import it. Or be lazy and stick it on window.store. You’ll want to have a
sensible order of initialization when your game starts up so that you don’t try
to access the store before it exists. But games already use loaders etc to load
up their images and sounds, so there’s a place for that. Load up the store
first, probably.

For reading state from the store you can use a syntax like
store.getters[‘setttings/graphicsMode’]. It can be a little simpler than that,
but this shows the synatx for a store nested within a store. In my game for
example, I have a gameStore and a settingsStore just because I didn’t feel like
putting *all* of the properties into one giant vuex config. One can also access
the state via store.state.settingsStore.someProperty but this is reading it
directly instead of uses the getter. You probably want to use the getter,
because then you can have a computed property, but either will work.

For writing state to the store, the key is store.dispatch. Syntax is like
store.dispatch('devStore/toggleDeveloperMenu’, optionalPayload). This is
invoking the *action* which means you need to create actions instead of just
using a setter with this particular syntax.

So that’s reading and writing! But what about reactivity? Well lets say your
game logic dispatches some state which enters the store, you’ll find that if
that state is displayed in your vue ui it is already reactive and working. For
example if you store.dispatch('game/updateHitpoints’, { hp: 50 }) and there’s
already ui to draw the hitpoint bar on the hud that is going to change
automagically. But what if you’re pressing buttons in your vue-based settings
menu or game ui? How does one get the game itself to react to that? Well there
are two some what easy ways (among a million homegrown options). The first is to
use the window to dispatch an event from the same action that you use to update
the state, and be sure that you always use the action instead of directly
accessing the setter. This will work fine, and I did it at first, but there is a
more elegant and integrated way. That is to use store.watch.

The store.watch(selector, callback) will invoke your callback when the state
defined by the selector you provide changes. For example this is how to setup
your game to change the rendering settings in bablyon js (pseudocode) whenever
someone changes the graphics level from low | medium | high | ultra.
store.watch(state => state.settings.graphicsMode, () =>
changeGraphics(store.getters['settings/graphicsMode’]));; The first arg is the
selector function, which in this case specifies that we’re watching graphicsMode
for changes. The second function is what gets invoked when it does change. The
actual body of my changeGraphics function is skipped b/c it doesn’t really
matter.. for me it might turn off shadows and downscale the resolution or
something like that.

Personally I create a function called bindToStore(stateSelector, callback) which
sets up the watcher and invokes it once for good measure. This way when my game
is starting it up, as all the watchers get setup listening for changes, that
first first invocation also puts the ui into the correct state.

So that’s writing, reading, and reacting to state changes across the border
between vuex/vue and any html5 app or game engine by integrating with getters,
actions via dispatch, and watchers. Good luck and have fun!

vuex vue vuejs vue2 vue3 html5 game dev babylon.js three.js pixi.js game
development game design javascript
9 Anmerkungen Nov. 1st, 2022
 * In App öffnen
 * Facebook
 * Tweet
 * Reddit
 * Mail
 * Einbetten
 * Permalink





froggy fall, prompt was fortune

froggy frog froggyfall fortune wealth pixel art pixel artist
3 Anmerkungen Okt. 14th, 2022
 * In App öffnen
 * Facebook
 * Tweet
 * Pinterest
 * Reddit
 * Mail
 * Einbetten
 * Permalink





i’ve fallen behind on #froggyfall but maybe i can catch up!

these are herb garden (lol… got lazy), broomstick, and cozy snack prompts

froggy froggyfall pixel art
3 Anmerkungen Okt. 13th, 2022
 * In App öffnen
 * Facebook
 * Tweet
 * Reddit
 * Mail
 * Einbetten
 * Permalink






DISPLACEMENT PROFILER FOR NODE.JS

I get hired to do performance work on node / javascript applications and I’ve
had a little trick up my sleeve for about a decade that may be of use to some of
y’all. I’ll be writing about node but the concept applies to a great many
things. One can even measure across languages…

I discovered this trick partially by accident when I made a node game loop and
experimented with setImmediate, nextTick, and setTimeout (nextTick can freeze an
application indefinitely btw). The most interesting loop is the one using
setImmediate, which in my case just incremented a counter by one and queued up
the loop to run itself again infinitely.  As I watched the console scroll by
counting the number of ticks, I came to a simple realization: these numbers that
I was seeing were what it looked like for the event loop to count as fast as it
possibly could, using 100% of the CPU resources allocated to it. Looking at the
CPU usage confirmed this. setImmediate however *does not lock up the event loop*
all it does is schedule work for the next tick. In fact, I would argue that
setImmediate and nextTick are in fact transposed and misnamed in node or v8 or
wherever it is that they actually live. I don’t think this is much of an
argument, I’m pretty sure this is a known mistake but hopefully I’m not
misremembering. IN ANY CASE; setImmediate spins as fast as it can but doesn’t
interfere with other events. So one one can make a setImmediate loop and have it
counting inside of an application that is already doing its job. What you’ll
find is that the speed at which the setImmediate loop runs depends on how much
other work is being done in that thread. And there we have it: a displacement
profiler. You can change a piece of the application and run this profiler before
and after and end up with a “volume” change in the CPU usage – thus measuring
something that was perhaps very elusive before.

I call the profiler by this name per the famous story about Archimedes. He was
given a task about figuring out if a crown was made of solid gold and he wasn’t
sure how he was gonna figure it out. At some point he was getting into a bathtub
that was full to the brim and when he got in water spilled out everywhere… he
realized that the amount of water that spilled out of the tub was equal to the
volume of the part of his body that had entered the tub, exclaimed, “Eureka!”
and ran through the street naked to tell everyone what he had figured out. He
had realized that he could measure the volume of the crown, weigh it, and figure
out what material it was made out of – or at least compare it to solid gold
which would be enough to answer the initial question. This same notion of volume
or displacement applies to CPU usage and thus provides an alternative method of
measuring performance (an alternative to a traditional profiler that measures
the timings of functions).

Let me say that the CONCEPT is more interesting than the specifies. The idea of
measuring the “space” available on the cpu outside an application’s workload
instead of measuring the application workload itself is a potentially very
different way of seeing things. I don’t recommend starting with it, do the
obvious stuff first. But when things remain obscure after looking at the obvious
stuff, consider this approach. A lot of applications these days are asynchronous
monstrosities without a clear pipeline of work being done… instead it’s all
evented i/o! Using a displacement profiler combined with a stress test one can
really get a feel for the capacity of an application. One is not going to get
the same answers by counting the milliseconds spent in the hot path functions
and multiplying by that by the hypothetical number of users at launch time. ALSO
if one expands the displacement to multiple threads (saturate them, ideally !)
one can even measure the hidden load of the application – e.g. what is happening
out of the application’s main thread but still nevertheless consumes cpu on the
machine, such as filesystem i/o or the cpu component of network i/o. We might
not think of node or javascript as traditionally multithreaded, and it isn’t,
but there are c++ threads or whatever doing stuff during a lot of the i/o and
not measuring that (and only measuring the javascript) is going to cause
problems when trying to figure out how much load a heavy i/o program can take.

Another thing to note about this technique is that data collected one day should
not be compared to data collected another day or even much later in the same
day. We may be measuring the displacement of an application, but we’re also
measuring the displacement of  *everything* that uses CPU. And this is something
that is pretty much constantly changing on most machines.

I hereby write this thing here and release it to the world so that no fool may
attempt to patent it. The existence of this concept is ancient I would hope no
one would attempt to own it. And I’m not just talking about Archimedes. Anyone
who opened up 10 copies of a video game because they wanted to see how some
other program they made behaved in lag was essentially onto the same idea.
GOODLUCK. HAVE FUN

programming profiling javascript nodejs node.js game development i/o
1 Anmerkung Okt. 3rd, 2022
 * In App öffnen
 * Facebook
 * Tweet
 * Reddit
 * Mail
 * Einbetten
 * Permalink





prompt: old book

Some of you may not know the history of the frog people… fortunate we are to
have this old tome.

froggyfall frog pixel art
5 Anmerkungen Okt. 2nd, 2022
 * In App öffnen
 * Facebook
 * Tweet
 * Pinterest
 * Reddit
 * Mail
 * Einbetten
 * Permalink





ima be doing #froggyfall this october…. so ima be drawing a frog-related prompt
every day . GL HF. prompt for today was mushroom but i went all in on the frog
instead lul

froggyfall
5 Anmerkungen Okt. 2nd, 2022
 * In App öffnen
 * Facebook
 * Tweet
 * Pinterest
 * Reddit
 * Mail
 * Einbetten
 * Permalink





Prototype of an engine with a raycast mining laser that can dig through the
terrain while the lighting / fog of war is recomputed.

The lighting idea here was that the light from the sky should travel pretty far
down but only a small distance horizontally when shining into a cave.
The “background” tiles affect the light quite a bit, so if one were to punch one
of those it would look like opening a window tot he sky. It isn’t perfect but it
has most of the feel that I was going for.

Also the actual tile graphics are being rendered in fairly raw webgl (a PIXI
mesh + shaders) and there’s a lot of logic for the world being divided into
chunks so that as the meshes deform only a small piece of the whole is actually
being updated on the gpu. I’ve written stuff like this a dozen times but this is
the first that this much of it is on the gpu and the performance is pretty
great. It does make me wonder about making essentially the same thing in webgpu
instead of webgl however…

game development pixel art webgl pixi.js
1 Anmerkung März 21st, 2022
 * In App öffnen
 * Facebook
 * Tweet
 * Pinterest
 * Reddit
 * Mail
 * Einbetten
 * Permalink





was trying to program rigid collisions and torque. it kinda sorta works

game development
1 Anmerkung März 21st, 2022
 * In App öffnen
 * Facebook
 * Tweet
 * Pinterest
 * Reddit
 * Mail
 * Einbetten
 * Permalink





Working on letting people use their own photos for https://jigsawpuzzles.io/

There isn’t much of a user interface yet, but the prototype is finally able to
cut a new puzzle from whatever image, provision a sever, and start a multiplayer
game. It does this all without actually uploading the user’s image to internet,
muhahahaha.

jigsaw puzzle jigsawpuzzles.io game development
5 Anmerkungen Aug. 5th, 2021
 * In App öffnen
 * Facebook
 * Tweet
 * Pinterest
 * Reddit
 * Mail
 * Einbetten
 * Permalink





Some more voxel experiments. This is my first time getting one voxel to be a
different color than another. Strictly speaking, I did not quite accomplish
that. These were colored just by looking at the height of the vertexes – the top
layer green, then dirt colored, and finally something rockier down below. It
would be much more interesting to step away from this globby noise generator,
and then to color the surfaces based on making volumetric chunks of different
materials instead of just coloring by height. That’s what I hope to work on
next. Also probably some deformation.

This marching cubes foray was inspired by Sebastian Lague’s “Coding Advenutre:
Marching Cubes” https://www.youtube.com/watch?v=M3iI2l0ltbE . His project is in
Unity and generates terrain (and noise) right in a compute shader. 

I took an essentially identical approach but due to the lack of a fancy engine I
instead used the cpu to generate vertices, normals, and colors in ye old
javascript before handing them to the gpu via webgl. Each chunk here evaluates
32x32x32 voxels and creates a mesh in ~30-40 ms (on a fairly fast computer).
That’s too slow for realtime chunk generation on the main thread, though the
workload is pretty perfect for using a webworker (it’s all math that produces a
float array). After a chunk is generated it’s no problem to render; these
particular chunks are so low poly that several of them were able to render at 60
fps on a chromebook with an integrated gpu. I’m pretty new to 3d, and I did not
investigate whether Sebastian Lague’s shader could in fact be translated to glsl
and run directly on the gpu even in a browser.

Lighting, as always in webgl, remains an ordeal. While it was possible to use a
default three.js shadow mapping approach and produce some darkened carverns for
the screenshots, ultimately the light looks nothing like what one would get in
Unreal or Unity. Naïve/easy lighting is also not performant and instantly fails
on my ultra-low-end gpu test case. I think one would have to actually calculate
light manually per face via a simplified schema (not a shadow map) or do some
shader magic of which I’m unaware (i know nothing of shaders, yet) to stand a
chance of getting any sort of visually interesting torch-lit underground
aesthetic while still producing something accessible to non-high-end gpus.

devlog game development graphics programming voxel procedural content generation
terrain javascript webgl
2 Anmerkungen März 10th, 2021
 * In App öffnen
 * Facebook
 * Tweet
 * Reddit
 * Mail
 * Einbetten
 * Permalink





learning about marching cubes

procedurally generated procedural content generation voxel webgl marching cubes
javascript
10 Anmerkungen März 6th, 2021
 * In App öffnen
 * Facebook
 * Tweet
 * Reddit
 * Mail
 * Einbetten
 * Permalink





wip low poly wolf. will be pounding rigging and animation tutorials until this
guy can sit, run, and howl

wolf blender3d blender
6 Anmerkungen Febr. 25th, 2021
 * In App öffnen
 * Facebook
 * Tweet
 * Reddit
 * Mail
 * Einbetten
 * Permalink





practicing low poly modeling, got a lot of the technique from this
video: https://www.youtube.com/watch?v=6mT4XFJYq-4

giraffe rabbit blender3d blender 3d model lowpoly
3 Anmerkungen Febr. 24th, 2021
 * In App öffnen
 * Facebook
 * Tweet
 * Pinterest
 * Reddit
 * Mail
 * Einbetten
 * Permalink




twitter.com


ALEX // TIMETOCODE ON TWITTER

“A rather friendly hacker started a 10,000 piece puzzle on
https://t.co/JZdKEHNKEv. Out of curiosity I left it running. A rotating set of
people have been cooperating to finish the puzzle for the last 26 hours. It's
almost done. #jigsaw #jigsawpuzzle #gamer”

jigsaw jigsaw puzzle gaming
Febr. 22nd, 2021
 * In App öffnen
 * Facebook
 * Tweet
 * Reddit
 * Mail
 * Einbetten
 * Permalink





practicing low poly trees

blender trees game development
2 Anmerkungen Febr. 17th, 2021
 * In App öffnen
 * Facebook
 * Tweet
 * Reddit
 * Mail
 * Einbetten
 * Permalink




Top Photos

Weiter