JAMECHA An AfroPUNK Adventure!

Share your Work
, ,
1

JAMECHA is a Pixel Animation Manga series I started back in 2018.

It's an Anti-Postapocalyptic scenario. Dystopian. It's to have very heavy Ghana, Nigerian, Jamaican, and West African influences. It's supposed to be a celebration of Black Culture, West African Folklore. Mythology and Marine Biology.

JAMECHA_JAMAICA_Logo_Attempt--Water-BEST

The idea initially was just to make a sprite (pixel art) movie with interactive elements since then I've developed ideas of how to make a makeshift RPG system. Either with a JS Library or 5 in tow.

Battle_Full MenuV3

I'd like to use Tumult Hype the most because I feel like it could have a bit of cross-over with a program for PC similar to Tumult called Hippani. Which I also have and use.

Here's an example of my pixel comic work

READ THIS WAY PAGE
READ THIS WAY PAGE822×1060 119 KB

INtro Page
INtro Page822×1060 206 KB

To be Updated
FEATURES I NEED:
Overworld, HUB, Player MENU
Battle System: With Input and feedback:

I want the Jamaica battle system is a combination of a side scroll battle from Final Fantasy one as well as a beat him up from Final Fight, Streets of Rage, and downtown net gets to mono Kotori which is River City Ransom the River City Ransom series. Also, other payments ones like river see girls River City Ransom underground side yeah, I want to create a system like that but I also want to combine it with an aspect of what Undertale is doing, where it has an RPG battle and a shmups system connected I want to try and combined a shmup and a sidescroller. Slash beat him up system with this with Jim with Jamaica within Tumult Hype. I don't know if it can be done but I'm trying to see if I can be done and if anyone has any information on that and how that can be implemented. Please don't even hesitate to let me know here on the Tumult Hype forums. Thanks again.

Shop/Progressive Item Get System (no monetization. Maybe an ad page one day for things I'd use.)

FEATURES I WANT:
Save/Load Anywhere
Theatre Mode: Plays all the scenes and maybe a fixed battle sequence to enjoy if they don't need or want to 'play' along with the tale.

Current Javascript Libraries I'm experimenting with my workflow:

https://animejs.com/ (For Dynamic Animations)
https://rpgjs.dev/ (RPG Javascript RPG/MMORPG
GitHub - ctrl-freaks/freezeframe.js: freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions. (I like to make gifs in Photoshop when animating game sprites and using the ones from that process and using 3rd party programs to further the effects and from THOSE I create sheets.)
Idle-Standing_2
Fight_Idle_1
Dodge
Jiio Idle Slide out
Jiio_Battle_High-Jutsu SHOT
Jiio Quick Combo EX

Currently Working On:

JAMECHA ZERO (a prequel series) Tech Demo. Planning on uploading progress to itch.io
JAMECHA-ZERO-1

I like Tumult a lot so I wanted to make a topic to constantly/consistently update and ask for assistance on how to possibly execute an idea. I don't think anyone's ever tried to do something like this before in Tumult so I understand if what I'm asking at times will sound confusing but bear with me on this journey that I know you can help see me through. Thank you.

3 Likes
2

That looks great!

While there's definitely folks who have used sprite controls in conjunction with game logic, I'm not sure I recall exact matches to your game style. You may want to peruse the Hype Universe News posts to see if there are examples there which are similar, as if they recently came across our radar we probably would have posted something on there.

Undoubtedly any game and new endeavor is going to require a bit of javascript. I'd say games in particular tend to be javascript heavy due to a reliance on logic. (Hype's UI was intended to express logic like if/else/loops/etc). So it may be good to structure it into design parts and code parts. Probably if it were me I'd do all the auxiliary/splash screens in Hype and the game bits entirely in JavaScript, but there can sometimes be benefit to still making use of Hype's layout.

Feel free to ask away for any specific questions!

Good luck on the project!

1 Like
3

Thanks, Jon!

Exactly, but I'm much more visually-minded than I am technically minded unless I already know what I'm looking for. I feel like what I'm really asking for from the community is help and feedback on my brain process (and debug and testing :wink: as in I want to upload builds so people can play and try out). I'm working in GDevelop 001 Game Creator and RPG Paper Maker.

Currently, I'm breaking up menus, maps, and screens as scenes I already think I understand the function command on each keyframe you make but I need to know how the ID system in Tumult Hype will work with the library in question that's the only thing I think my brains missing. An example would be I THINK I understand how to add a javascript library but I'm not sure if I do.

image

Right now, I'm following the instructions on the forums and website to simply import all the .json files of a library into the project. Yes? Connecting actions to functions to inputs seems straightforward enough in Tumult Hype just gotta know how to better take advantage of symbols their timelines and how to code them to work together.

Thanks so much for the advice I'm gonna look into it as well as post progress and updates of getting to a stable demo.

4

There's a few basic principles to know about:

  • Unique Element IDs should be unique for the entire .hype document (and .html page).
  • If you are using symbols or multiple layouts, it is generally recommended that you use class names instead since you can have multiple ones of that.
  • At runtime, if Hype detects that an ID is already in use, it will assign a new one to ensure stuff works correctly.
  • Therefore, you should generally use the hypeDocument.getElementById() API instead of the page's document.getElementById() call, since the hypeDocument one keeps the mapping on any reassigned IDs.
  • Hype won't touch any IDs that are part of Inner HTML code

Looking at freezeframe, you probably don't need any of those .json files. JSON is a data format, and probably just include build config information. Instead you will want to include the actual .js files for the project. I see freezeframe has a dist folder that has a freezeframe.min.js file; this is the built version and probably all you need:

A few notes:

  • Hype's resources library is a flat list, so any directory structure will be removed. If you need to maintain a directory structure, then you should do your previews/work by exporting your hype document into the properly built up folder.
  • From code, you can access files in the resources library with the magic ${resourcesFolderName} variable that gets replaced at export. For example, if you have something like <img src = "${resourcesFolderName}/animation.gif"> as inner html, at export it might be something like: <img src = "MyGame.hyperesources/animation.gif">. Since freezeframe is using <img> tags and animated gifs, I'm guessing you'll need to know this :slight_smile: .
  • A lot of times, you can setup your javascript to work with libraries using the On Scene Load event to Run JavaScript. However, this is called on every scene load. Scene Loads don't reload the page, so you may wind up re-running stuff in a way that causes issues. So you may need to manage this if you use multiple scenes. Generally you can either set some code that flags stuff to only run once, destroy stuff on Scene Unload, or run a single time through various other means.
2 Likes
5

Hey John! Hi everyone!

Happy New Year!

First thank you so much for your help Jon, I've been learning and trying to rethink my view of what makes a game, a game. I wanted to ask what if any, are your thoughts on Libraries like 'Phaser'.?
image

I find my brain trying to understand how to interpret Phasers functions within Tumult Hype. Say for example I wanted to do somethign simple like a title screen with continous animation, and music playing with the ability to select and de-select 'New Game'. How would I do it?

Like if I wanted to use this snippet Phaser 60 FPS Test Snippet :

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.atlas('walker', 'assets/animations/walker.png', 'assets/animations/walker.json');
        this.load.image('sky', 'assets/skies/ms3-sky.png');
        this.load.image('trees', 'assets/skies/ms3-trees.png');
    }

    create ()
    {
        this.bg = this.add.tileSprite(0, 38, 800, 296, 'sky').setOrigin(0, 0);
        this.trees = this.add.tileSprite(0, 280, 800, 320, 'trees').setOrigin(0, 0);

        const animConfig = {
            key: 'walk',
            frames: 'walker',
            frameRate: 60,
            repeat: -1
        };

        this.anims.create(animConfig);

        const sprite = this.add.sprite(400, 484, 'walker', 'frame_0000');

        sprite.play('walk');
    }

    update ()
    {
        this.bg.tilePositionX -= 2;
        this.trees.tilePositionX -= 6;
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#304858',
    scene: Example
};

const game = new Phaser.Game(config);

I think the compartmentalization of my mind to understand and reduce redundancies of what I'm asking at times needs break down in of itself so, forgive me if I sound like I'm being remedial.

I have grown to love and appreciate thing in TUmult Hype because I would proabaly be able to create a Widget within itself and make mini games that attribute in the comic. Sprite SHeets have shown me a lot of power so I just need to learn how to properly compile and streamline workflow. I thought I would need to animate my gifs with a .gif animation library but that takes more work and uses up more memory.

How would I install Phaser? Am I installing it correctly following the instructions of adding other libraries?

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

I think I'm suppose to put this in the header part of the part of the project.

The reaons I'm asking and not jsut presenting findings is because i'm trying to save time by asking if at glance the code and my reasoning is sound in order to better understand how Tumult Hype understand snippets and code. This helps me have more trust in the code that I see and how I can manipulae it to my ends. My question then becomes when I start messing with timeline code, will it translate to the timeline in the project or do I have to create teh animation first to match the code (function)? I realize while asking it's not a real either or question it's probably both. So I guess the heart of my question doesusing this library make more sense to attempt what I'm trying and if not can anoy reccomend a library that would? I've been looking at Pixi.js too.

I pray, I made a semblance of sense. Thank you for all time and any help.

6

Integrating Phaser 3 with Tumult Hype for game development offers interesting possibilities, but also some challenges due to their differing architectures. Phaser 3 is a canvas-based, flexible game framework for building interactive games and animations. It operates on a game loop, using an update function for continuous animation and interaction.

Tumult Hype, on the other hand, is more timeline-based, focusing on HTML5 content creation with a keyframe-based animation approach. It doesn’t rely on a tick or update method like Phaser does for animations.

To integrate something like your Phaser 60 FPS Test Snippet into Tumult Hype, you’d typically embed the Phaser canvas as an HTML widget within a Hype document. This allows Phaser to handle its own rendering and game loop, while Hype manages the broader structure and additional elements like UI.

Using only Hype

To create a game with continuous animation and an interactive title screen in Tumult Hype, focus on designing an engaging title scene using Hype's graphical tools. For continuous animation, animate elements directly on Hype's timeline to create looping effects. For the interactive part, like a "New Game" button, use Hype's built-in actions, including the 'Play Sound' action for adding music or sound effects. This approach uses Hype's visual and interactive capabilities.

If you want to use a tick approach in Hype you could do the following:

requestAnimationFrame with Scene Load and Unload in Tumult Hype

Start Animation Function:

function startAnimation(hypeDocument, element, event) {
    function tick() {
        // Your animation logic here

        // Schedule the next frame
         hypeDocument.customData.animationFrameId = window.requestAnimationFrame(tick);
    }

    // Start the animation loop
    tick();
}

Stop Animation Function:

function stopAnimation(hypeDocument, element, event) {
    if (hypeDocument.customData.animationFrameId) {
        window.cancelAnimationFrame(hypeDocument.customData.animationFrameId);
        hypeDocument.customData.animationFrameId = null;
    }
}

Implementing in Hype:

  • Assign startAnimation to the 'On Scene Load' event of a specific scene.
  • Assign stopAnimation to the 'On Scene Unload' event of the same scene.

This setup ensures that your animation starts when the scene is loaded and stops appropriately when the scene is unloaded.

Hope that helps.

1 Like
7

I wouldn't likely mix Phaser with Hype.

There are only two main limitations on using Hype to make games. Both are related to the choice of the Physics engine. Matter.js has trouble with constant collision detection and there's a loss of momentum in bouncing…

If I wasn't going to make a game with just Hype, I'd probably pick Godot over Phaser.

godot-vs-phaser
godot-vs-phaser1640×1400 40.6 KB

But coincidentally, I've been struggling with the idea of making "A Book About Making Games". Hype has a lot of untapped power, especially if those two issues are fixed, but Godot really turned a corner. I have a potential solution to that conflict. The problem is the massive amount of work required to make this project successful. I'm not sure the demand is there to justify all that work.

I ran a poll recently on Photics.TV…

gaming-poll
gaming-poll1308×776 24.8 KB

Less than half of the people had played a web game recently. :scream_cat:

Considering that the channel has a lot of gaming content, I was surprised by the results. I don't know if that means web games are just not popular or if there's a demand for the next generation of web games.

Final Fight, Streets of Rage

You might not need Constant Collision Detection for something like that. First, you'd need a main collision shape to keep the characters from standing on top of each other… and then you'd need hit boxes. Theoretically… Hype can do that.

I haven't simplified collision detection, but I created the Photics Physics Bridge to make it easier to use the Matter.js Physics engine in Hype.

Ideally Tumult would take that code, or at least the concept, and merge it into Hype. It could be a lot easier to make games with Hype. Yet, I think it's possible to make at least retro style games with Hype.

1 Like