Spryke - hardcore new-school platformer

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • Ok made up a simple example with some platforms more in "the Spryke way"
    (well, if you use a good amount of imagination to see awesome graphics when there's now crappy sprites XD)
    and some random 3D objects placed here and there:

    Please login to see this link.

    Warning: default Fusion platform movement, getting stuck is behind the corner XD

    preview gif:
    Please login to see this picture.


    A very plain level, with some random ideas like a "trap" platform rotating down towards the end
    (I think it's a nice fx because you don't have to animate it, and so it's flexible to behave the way you want)

    A random "platforms field" of 100 elements is created towards the far right of the level, to test performance in crowded environments.

    There's some displacement maps, I found them damaging performances with "resample" ticked, but maybe it's only my machine (see performance below)

    The way it is now all the "3D" stuff is behind the top layer, where the player and 2D platforms are.
    With some little customization, some 3D stuff could be put even "above" the player/platforms.

    I've left P3D simple "debug" box open on topright of screen so you can enable and disable "resample" from there,
    and also change render depth (how far you can see) with +/- buttons.

    Only the tiles where I've written "2D tile" are the real flat 2D obstacle platforms,
    against which the 2D hitbox collides as it would do in any plain 2D game.
    You can see the trick by using Q/E and/or A/D keys, those will tilt camera X and Y angles,
    so the 2D platforms will go out of sync with the 3D world, to resync again press "enter".

    On the editing process:
    I won't say this is exactly that comfortable to do on a large scale with plenty of platforms XD
    but don't know either how much hassle is making those "pseudo-isometric" platforms by hand...
    spent a couple hours making up the short example you see, though I can probably improve some aspects of the process.
    So basically I think it's worth considering not as a "time-saver" solution, but only if the visuals are pleasing enough
    (on that side, I guess the shaders could be slightly modified to improve on the antialiasing side, but should check better in case it's needed!)

    On the performance side:
    the file is capped at 200 fps, on my not that good pc it runs at solid 200 fps when not scrolling, at 180 when scrolling
    worse performances with "resample" ticked when the "displaced volumes" are in sight, going to about 130 fps
    and when there's about 100 platforms in sight (far right on the example), going down to 150 fps.
    When going full screen (alt+enter), it's almost always at full 200fps, but our good old microstutter is more noticeable here..

    There are some other things to consider, possible issues with the depth buffer and resolution changes etc. (you could probably avoid the depth buffer though)
    but won't go too much in detail as you might not like the result anyway.

    If on the other hand you like the idea, feel free to ask more info,
    I've spent some considerable time working on this kind of stuff and I'm happy to help Spryke if I can,
    even if you think you want to do it and end up not using P3D for that ;D

    a selection of my Fusion examples can be found Please login to see this link.

  • [MENTION=18866]schrodinger[/MENTION]: Very interesting. I'm wary of wading into such new territory for the engine, but I'm definitely intrigued. Part of me is screaming No - scope creep - stay away! You'll never finish Spryke if you keep this up! while another part is quite excited that this might be a workable and attractive solution.

    Performance-wise, it's all fine on this end. Everything runs smoothly, including displacement maps and resampling. Without resampling, there's too much pixel-jitter for my liking, but resampling solves that nicely - except for the edges. The edges don't appear to be affected by AA, and still tend to be jaggy. You can see this most clearly on the displacement map area and the fiery sphere, though you can also find it on the platforms. I don't think I would use the displacement maps anyway, as they seem like they would conflict with the 2D aesthetic which I want to keep. I'm ok with augmenting the platforms with a little carefully implemented P3D, but not with shifting the style itself. So I'd probably be looking at keeping all background and foreground layers 2D, with just the middle platform layer 3D.

    I'll buy P3D in a moment. Could you send me the MFA so that I can play around with your example, and try and put some of my current graphics into it . And yes, I still have plenty of questions/comments XD

    ---I need to see this in a 1920x1080 environment. Partly to see the effect on performance, and partly to see how the 3D looks with more pixels. I wonder if the perspective will get more extreme with more horizontal resolution.

    ---Is it possible to adjust how much the sides of the platform tilt? Perhaps with a POV adjustment or something like that? I can imagine I might want a more 'subtle' effect that doesn't necessarily use a realistic perspective, but just tilts the platforms slightly.

    ---One of the biggest questions is how feasible this is with the 'organic' platform shapes I intend to use. Below is a shortlist of shapes I'm currently considering. I'd say that this is pretty close to the type and variety of non-square shapes the final game will have

    Please login to see this picture.

    Is this likely to end up being prohibitively complicated, trying to get these shapes to work? If I paid you, would you be able to write code to make these shapes work, the way you've done for spheres, or is there simply a mathematics and/or performance barrier that puts that out of the question?

    --by the way, there's a bug when you jump off the uppermost platform (the one that almost comes on-screen at the end of your gif) - the platform face moves with you

    --Is there a way to add AA (or stronger AA, if there already is some AA) to the edges?

    --I also don't have any understanding of how the editing process would work, and how well it would fit in to my current engine. I guess I can only learn that by playing around with P3D myself, which I'll try and do today.

    --Would using P3D for platforms this way open the door for any new lighting possibilities?

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

  • [MENTION=18866]schrodinger[/MENTION] - does P3D feature camera culling ie. blocks off screen are not rendered? You would likely need to render 5-20 platforms if so...

    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

  • And what would be the options for dealing with objects that are on top of the platforms? Even if the object remains 2d, I guess its x and y position would need to constantly adjust so that the tabletop didn't appear to slide around underneath it?

    Come to think of it, would Spryke's x and y need to be adjusted too, whenever she's not at the direct centre of the screen (eg. while camera is LERPing, or when at bottom corner of level)?

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

  • @Please login to see this link. : thank you for supporting P3D! :)

    I definitely understand how implementing this solution could be a delicate decision,
    and sure if you like it you're good giving some days to an in depth try to see what kind of problem could arise.

    The example I've posted here is made with 2.1 version, which is about to be published
    (I'm saying this since a couple weeks but now I promise it's true: I ONLY have to tweak minor things and prepare some other example and update the manual XD
    I spent a couple weeks more to add triangles though, so I think it was definitely worth the wait!)
    Despite the fact this time I'm just adding a +0.1, the new version dramatically improves the engine in a number of ways,
    including 99% of the things you see rendered in that example
    (previous versons didn't have box,sphere,cylinder,displaced volumes and triangle primitives,
    all was only made with quad meshes and some limited "isosceles" triangle)
    and also features among other things this simplified 2D-3D sync feature.

    I can send you the engine beta mounted on that example if you want to tinker with it before release,
    it's pratically ready, maybe seeing if I can streamline the 2D-3D process a bit more,
    but that example was put up quickly and is VERY messy!

    Unfortunately I'm about to leave now but will be back later with detailed answers to the questions.

    Btw, I've recently open up a discord server for P3D support X),
    not publicly spreaded the link so far but I was planning to do it shortly and include it in the manual for 2.1 update..
    so if you prefer having a talk and we catch in a good timeframe you can join here:
    Please login to see this link.
    (other P3D users or interested wanting to join feel free too, of course!)

    @Please login to see this link. : yes P3D does (try to) render only what's currently visible (if you look at the numbers on top of the screen, where you can see i.e. 50/125, the left number is the poly in sight -actually single primitives-, is it a singular mesh, not in the example save for the big water at bottom, or single primitive shape like the cubes).
    I said "try to" because it's a delicate balance between what's faster: computing if a full body comprised of a number of segments and vertices is within an angled view frustum,
    vs calculating if a cubic bounding volume is inside another cubic volume. So far I've found that the shader is much faster to process some thousands pixel more than the runtime calculating some hundreds vertices to discard the object! XD
    So it does it, but in certain situations and with certain shapes, it does a bit coarse to save on calculations.

    a selection of my Fusion examples can be found Please login to see this link.

  • ---I need to see this in a 1920x1080 environment. Partly to see the effect on performance, and partly to see how the 3D looks with more pixels. I wonder if the perspective will get more extreme with more horizontal resolution.

    I honestly never tried P3D on very high resultions (primarily due to my monitor not supporting it XD) so that's something that would have to be tried, sure left-right edges of the screen will get a bit more squeezing but it should hold fine I think. Easy to try and see in case!

    ---Is it possible to adjust how much the sides of the platform tilt? Perhaps with a POV adjustment or something like that? I can imagine I might want a more 'subtle' effect that doesn't necessarily use a realistic perspective, but just tilts the platforms slightly.

    I think there are some factors determining the "amount" and "look" of the effect, all of these you can customize, mainly:
    - the "zoom factor" (how much objects are magnified)
    - the platform dimensions >> depth, in the example you can see some are "thicker" and go more in depth than others, of course deeper the platform more noticeable the effect
    - the camera position, to have a good 2D effect it must be perpendicular to the player and the "straight line" he moves on, but you can choose to offset the camera up-down/left-right and this will basically change the POV and so have an effect on how lines will go towards the vanishing point in respect to the screen

    ---One of the biggest questions is how feasible this is with the 'organic' platform shapes I intend to use. Below is a shortlist of shapes I'm currently considering. I'd say that this is pretty close to the type and variety of non-square shapes the final game will have
    Is this likely to end up being prohibitively complicated, trying to get these shapes to work? If I paid you, would you be able to write code to make these shapes work, the way you've done for spheres, or is there simply a mathematics and/or performance barrier that puts that out of the question?

    Looking at the shapes, many of them seem to have very low curvature, I think that could be feasible with meshes, being quad or triangles, probably quads would be good enough if the curvature is only on one, or opposite sides, like all of those thumbs I think? To get a smooth curve you need more polygons, so depending on "how smooth" the effect needs to be this could be somewhere in the 20-30 meshes per object (curved on both sides), doable, but could be problematic if lots of such elements are in the screen at the same time (for performances) and such pieces of course are not too handy to code ("model") and texture properly (unless they are all made from the same "material").
    Pure speculation: I *think* some sort of parametric curve shader could be made, but it would be probably lot of work, and not so easy to use on already existing shapes (you'd need to somewhat obtain the curve equation form the picture...) so I would keep this option out to be safe now.

    --by the way, there's a bug when you jump off the uppermost platform (the one that almost comes on-screen at the end of your gif) - the platform face moves with you

    Good catch! That's the scrolling screen area hitting the top of the frame area and stopping,
    it can be easily solved having a big enough frame area and moving all the level platforms down
    (since you can't grow up the top of a frame area, nor "virtual scroll" to negative Y)
    so it's something to plan at start: make sure there's enough room to scroll on the edges of the level

    --Is there a way to add AA (or stronger AA, if there already is some AA) to the edges?

    This is something I have to think upon, I see what you mean, edges are "pixel-crisp" and not smoothened (P3D2.x is a "raytracer" - the ray hits the shape or not, so there's no smooth "inbetween"). I'm thinking I could leave a "border" area to smoothen the color a bit (maybe with some alpha?) but can't properly answer until I make some test, I never digged this specific problem so I might need to do some additional research.

    --I also don't have any understanding of how the editing process would work, and how well it would fit in to my current engine. I guess I can only learn that by playing around with P3D myself, which I'll try and do today.

    Don't know if you tried, there was no easy way in 2.0 to make this trick (unless you made some customization to the engine)
    but in 2.1 you'll be able to center camera on the player (or, say, your Volcamera X,Y positions) in any 2D layer, then passing the X,Y coordinates to the engine.
    Setting up the scene consists in having a camera in the map looking straight north (Z_angle=90), and linking X,Z coordinates of this 3D camera to X,Y coordinates of the "flat" scrolling 2D camera.
    Depending on zoom factor, the Y position of the 3D camera must be calculated for it to be perfectly in sync (so that 1 pixel in the 2D layer == 1 pixel in the 3D layer), it's just a one time calculatin, set up at start and leave it.
    Once all this is well set, placing 3D platforms would follow the same placement you have in the 2D layer for X coordinates, Y coordinate is fixed (to be at that 1:1 ratio distance from camera), Z coordinate depends on the 2D platforms Y coordinate (how "high" is the platform).
    Once you get the overall picture this gets easy enough, and you could even automate the process to place platforms correctly (but only if you use active objects for these "augmented" 2D platform), otherwise, without a good start setting and/or without paying too much attention, it can be a bit of trial end error XD

    I never tried mounting it in an existing game and I guess it would mean: having at least the two "projection" and "map" layers available and named this way, and behind the "front" layer of the game with platforms. Copying over all engine objects (in topleft corner of projection layer), and then the engine group, into the respective layers of the game. Can't remember if the "interface" layer would be strictly necessary, probably not. Then what written above should apply I guess.

    --Would using P3D for platforms this way open the door for any new lighting possibilities?

    If you think of realtime shadow-casting no, this is unfortunately not supported, would require multi-passing the shader, which afaik is not possible in Fusion. As for straight, simple lighting, how much a 3D face is "bright", P3D provides some "global light" values to tweak the overall min and max brightness of each element in the scene (similar to what you could have with RGB coefficients), and a basic "fixed" shading for boxes (bottom of blocks is darker than top). There's some "more advanced" feature for single meshes, they can react to the lightsource angle and they can react to a "spotlight", you can see it in the "castle example" in P3D, changing light intensity/angle with 1,2,3,4,5 keys, and see what happens when you fire that magic blue projectile or near the glowing torches at the entrance.
    Unfortunately the "shapes" shaders didn't have room enough for this feature to be available on them too so the spotlight feature and angle-reaction is limited to meshes, and spheres (which is the shorter shader among shapes).

    -- And what would be the options for dealing with objects that are on top of the platforms? Even if the object remains 2d, I guess its x and y position would need to constantly adjust so that the tabletop didn't appear to slide around underneath it? Come to think of it, would Spryke's x and y need to be adjusted too, whenever she's not at the direct centre of the screen (eg. while camera is LERPing, or when at bottom corner of level)?

    If the object is not placed too much "in depth" my impression is this is not noticeable and doesn't need to be taken into account, do you see something wrong on this side in that example I posted?
    In that example the alien sprite is placed just a few pixel over his invisible hitbox,
    this seemed enough for me to make it look over the "depth" side of the platform, but it didn't seem to slide,
    since the foremost parts of the platform will be "parallaxing" just a little bit, this is not very noticeable to my eyes... but don't know to better eyes?

    a selection of my Fusion examples can be found Please login to see this link.

  • Thanks heaps for your detailed responses, [MENTION=18866]schrodinger[/MENTION]. I think the sensible option for me now is to stick with the 2D system I have. I've already spent much of this year breaking Spryke by adding modules and tinkering with it so much, and it sounds like adding P3D would create a lot more work to get it to play nicely with everything that's already there. It's time to get moving forward finally and get the core game done! I'll keep 3D platforms in the back of my mind as a potential future update though. Thanks again for all your suggestions and help!

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

  • That makes sense [MENTION=15682]Volnaiskra[/MENTION] - told you it was a "crazy" idea XD

    Just as a last update, I've completed the full template yesterday, and penned down the "blueprints" for the complete starting setup required,
    I'll include this example/template in next P3D release but if you'd like to check it out before, just for curiosity, feel free to drop me a pm.

    With a simple "auto-platform-creation" code it's literally as easy as dragging and dropping the 2D platforms on screen where you want them on the 2D layer (as you would do normally, basically) width and height are directly taken from the platform graphic (you can even resize the platform directly dragging handles on screen and the 3D block will follow, but this of course will squeeze the platform graphics..), and you can optionally set preferred depth in the platform.
    So it's super easy, after a carful starting setup once-forever (that might take an hour),
    but only for geometric blocks, as I was suggesting in the beginning.
    Those other shapes would require each a custom auto-plaform code and of course more work.

    But of course there are other considerations to do for a possible integration in an already existing - and pretty complex - game!

    I've included that automatic-platform code too in that example,
    I think it's nice so thank you as well for making me dig still a bit more in this :)

    a selection of my Fusion examples can be found Please login to see this link.

    Edited once, last by schrodinger (December 6, 2017 at 10:42 AM).

  • Well I'm really glad that you got something out of it and I wasn't a waste of your time! Thanks again for all your work. Your generosity, know-how, and helpfulness are, as always, incredible, and one of the things that make this community so special. :)

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

  • Too kind Vol,
    let me thank your skills, insight, accuracy and sincere attitude,
    these generously spread qualities all vastly enrich the community :)
    (...and Spryke!)

    Sorry you had to spend some money for the engine though, hope you'll have some use of it one day.

    Now back to Spryke core works ;)

    a selection of my Fusion examples can be found Please login to see this link.

  • Maybe you have answered this before, but what program do you use to animate?
    I like all the progress posts you make. Spryke keeps getting better and better. Keep it up!


    Thanks [MENTION=10293]mickarrow[/MENTION]. :) I use Please login to see this link. for the animation in Spryke. Below are some snippets of what it looks like (the animation shown is a little rough around the edges, but you get the idea).

    Toon Boom Harmony Premium isn't cheap, but I can't recommend it enough. It's got the most intuitive vector tools I've ever seen in any program (I create everything in vector but export into Fusion as raster), and I love how everything is controlled with a node hierarchy. You can see the node view in the 2nd gif. Spryke herself is comprised of 250+ nodes, but that probably looks and sounds more complicated than it is. In reality, it means that you can connect every piece of her in a logical and intuitive way. So, for example, if I move/scale/rotate her eyeball then her iris, pupil, and the little white reflection on her pupil will all automatically move with it...though I can also move any of those elements independently if I wish. So I only need to rig her once, and then I can reuse that rig for any number of different animations.


    Please login to see this picture.

    Please login to see this picture.

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

  • I've been overhauling Spryke's platforms this year. A long-standing problem has been that they were too blocky and repetitive, and weren't as pretty as the background graphics. So I'm finally addressing that.

    This is an overhaul in the true sense of the word, and goes beyond just the way the platforms look. Months of work has gone into behind-the-scenes stuff, including how the platforms are structurally built, how the level editor and engine handle them, and how Spryke can traverse this newly curvy and slanted terrain. The aesthetic style is still improving but is starting to get to a point where I'm happy with it.

    I've also made massive strides in my workflow, across both Photoshop and Fusion. I've taken the time to properly embrace various Photoshop features that I'd previously neglected or not taken full advantage of, like artboards, generator, custom shapes, actions, and the CC libraries. I'm now working way, way smarter and faster in Photoshop than I ever have before. I'm actually quite stunned by how much better my new workflow is - and how inefficient and clunky my workflows were for the previous 15 years! All this new efficiency and project organisation has freed up my headspace to the point where I'm actually capable of making better graphics than before.

    My Fusion workflow is much improved too, as the new platform system makes level editing much more straightforward - platforms are much quicker to move around, and there are less Active Objects to update when I make graphical tweaks.

    Please login to see this picture.

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

  • Very interesting, Vol! That environment does not look tiled at all, I wonder how you tackle this from a level design perspective. Also, good job on your movement engine, handling all those variable surfaces must have been a little nightmare o_O

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

  • Can't wait to see Spryke completed.

    Not as much as I can't wait!! XD

    [MENTION=12521]Julian82[/MENTION]: Yes, getting the diagonals working was more than a little nightmare! Though [MENTION=12276]SolarB[/MENTION] ended up helping me a lot. Running on diagonal/curved ground is now flawless, as is sliding on curvy ceilings. There's still a bug or two with sliding down curvy walls, which we're still working on.

    Instead of small tiles, the platforms are now comprised of large blocks. These blocks could still be called tiles, but their large size offers much more flexibility. I spent a lot of time looking at Spryke and other games to see what sort of shapes are needed to cover most level design situations. Then I got it down to about 50 or so different blocks, across several pre-determined widths/heights, so that they can connect like Lego. For example, here are all the vertical ones. Doing it this way uses more RAM, but ends up with way fewer objects on-screen than using hundreds of 50x50 tiles everywhere, which was actually a significant resource drain in earlier versions of the engine.

    Please login to see this picture.


    By far the hardest part was getting the platforms to overlap each other correctly. Left to their own devices, you end up with many situations like this (maybe not quite this bad - I exaggerated to make the point clearly). But it's tricky, because sometimes platform A is lower and more westwards than platform B and needs to be placed over it, while at other times A needs to be placed under B - depending on the shape and size of the platforms in question, where the transparent areas are inside the platform graphics, and other factors.


    Please login to see this picture.


    So I spent a huge amount of time programming in a 5-part system that uses a number of heuristic tactics to autocorrect the platforms' order as best as possible. So the above scenario will now end up like below. You can see that there's still one error towards the bottom - so I also had to build in a system that lets me manually correct those errors. But at least I only have to manually correct a few platforms per level now, rather than needing to manually order every single platform every time I tweak a level. The autocorrect takes care of the bulk of the work now.


    Please login to see this picture.

    This whole autocorrect business was not my idea of a good time. Here's all the code I ended up with, just to make the platforms sort of, almost order correctly on their own:

    Please login to see this picture.

    And here's a spreadsheet where I studied various combinations of platforms to try and find the heuristic rules that would predict bad combinations with as few false positives as possible. So, I'd make a test level and run it, write down which platforms didn't overlap correctly and which ones did, then enter in various datapoints for each combination. Then I'd look for things like hmm, when platform A has been placed below platform B and platform A's centre of gravity is at least 760 less than platform B's centre of gravity and A's eastern edge is more than 2000 pixels from B's western edge AND A and B's combined width+height divided by their Y differential plus the difference of their vertical centre of gravity plus 1 is less than 5, then this usually that means that this is combination is ordered correctly, so we should whitelist this combination and not autocorrect it.....Like I said, not my idea of a good time! This sort of thing is not something I had any experience with, so it took a lot of trial and error and exhausting problem-solving to get it working ok :o


    Please login to see this picture.

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!