How does one make all those cool effects? :<
Loops, math, and particles, I assume!
Yep. That's pretty much it. Start with some simple vector math and work your way up. Also, additive blending, additive blending everywhere -- it's cheap and doesn't need depth-sorting.
This minigame is implemented completely within my engine's 3D-HUD API (using placeholder-images) -- it's really just to stress test the GUI & event systems in use in a larger game (it's tucked in the other game's level editor as an easter egg).
The particle swarm for the beam is simply a spherical distribution of particles that interpolate appearances as they get closer to the center point, animated via basic Newtonian gravity equation -- If the particle cloud were much larger you'd see some start orbiting, but since they're so near to the intangible center point of a much larger mass they whip around and past -- a gravity slingshot. It's very inefficient managing all that in a component hierarchy; I really wouldn't recommend adding gravity physics or thousands of animated label items to a GUI -- the tree view of the menu's properties brings my system to its knees.
The "beam" needs a lot more work, but it's just two triangles \|/ (instead of one, to prevent texture warping) with a wrapped/tile-repeating scrolling texture -- part of the Virgon (Galactic) Lexicon. You don't have to invent a
language with highly OCR-able glyphs and Reverse Polish Notation grammar that's easy for machine intelligences to read and understand just to make the effect, I'm just using it as a placeholder graphic.
Since I slept it's a new day for me, so: Today I made image frame delta compression multi-threaded. Theoretically, up to 4096 cores, but I'm only able to verify 8. It's about 6x faster for me to encode a GIF video now. I should be able to use the same worker-thread pool in the WebM encoder too...
13MB .GIF clip.This is a longer recording, so I made it lower-res (also to test out variable res output). It shows a bigger chain destroyed, and the animation of the next pieces, as well as a glimpse of the 3D menu the game is in.
This is something I made today in Javascript and HTML5. I've been wanting to make a rouguelike for ages so I did this in my little capsule hotel room in Japan. The river and house are my first dips into procedural generation. I'm looking to add curvature to the river and more rooms to the house in the next few days. I am also loving working with Javascript. The only real problems I'm stuck on are what to do about reading external data and lagless input (which I believe can be fixed with JQuery?)
Sweet. I did some
JS+HTML game coding about a decade ago in the early HTML4.01 days (to teach myself JavaScript). The new HTML5 canvas & audio tags are really nice. The trick to less input lag is to do the input update logic (move the player, whatever) in the
onKeyDown event, but that's kind of hackish... Alternatively I set input flags in the event handler and used a "main loop" function that updates every 10ms {
setInterval( mainLoop, 10 ) }, and only draws a new frame if input was received or the desired frame delay has passed (use wall clock time via Date() to update animations since interval callbacks can be quite stuttery).
JQuery is a bit much, IMO, just test for "element.attachEvent()" and use it in IE, for everything else "element.addEventListener()" -- You'll write two sets of event flag setting functions, but it's much faster than JQuery's complete event system re-implementation, which is kinda slow since it adds layers between the browser and your code that the aforementioned selective event registry technique avoids.
To load external data back in the day you could add an IFRAME and point it to a .JS file that could update the main window's variables, but today's browsers disallow that sort of thing -- You can get around it a bit by using the
window.name hack (which gets around cross-domain context restrictions). My Snack-Man JS game used base 64 encoding and stored all the level data in text strings in its single JS file. Today I'd recommend an AJAX call to load some XML or JSON document. Browsers provide XML DOM access to JS similar to the page's DOM, for externally loaded resources.
JSON is nice too, you don't have to walk a DOM to get at your data -- Fetch some JSON encoded data as a text file, then parse it with the browser's JSON parser -- Or, just eval() the fetched text into a var if you can trust the source. This is less secure since you're loading arbitrary JS code, but has the added benefit of being able to encode functionality as well as data: You could load an Enemy that has new behaviors not pre-defined in your main .JS files... helpful for bosses. You can also construct and append a <script> tag to the current document too -- that's how many JS Bookmarklettes pull in all their extra data and code.
Pretty.
Neat. That makes all kinds of nutty
Moiré effects on my laptop screen when I scroll.
Community
