Zim inside an html element

Questions
1

Trying to place a ZIM object / frame inside an html element, like so:

Header

Left Content 
        </div>
    </div>
    <div class="column right-column">
        Right Content
    </div>
</div>

<script type="module">

    import zim from "https://zimjs.org/cdn/017/zim";
    const frame = new Frame({fit: "both", width: 1024, height: 1024, tagId: 'game-container'});

but it doesn't work...
any example for this?

2

yes... scaling is the parameter name so in the Frame() parameters:

scaling:"game-container"

and no fit:"both"

See DOCS - ZIM JavaScript Canvas Framework - Documentation

and FRAME - ZIM JavaScript Canvas Framework - Code Creativity with ZIMjs! - you are wanting one of the tag modes.

image
image753×389 30.1 KB

3

Got it.

But what if i want to build my game with constants values, like:
stage: 1024x1024,
player: 128x128,
etc.

but still allow it to scale proportionally when the TagID element is resized, without needing to make the internal calculations in my code like so:

player.size = 1/8 * stage.size

This is the default behaviour when FIT value for the scaling, and I'd like to keep it this way even when the ZIM element is scaled to an HTML element...

Is that possilbe?

4

There are a couple tag examples at FRAME - ZIM JavaScript Canvas Framework - Code Creativity with ZIMjs!, they scale in different ways. Just lock the dimensions like the second one and scale it with CSS - that is like a FIT mode in a tag.

1 Like
5

This example indeed sorted things out:
https://zimjs.com/templates/tag2.html

I needed the holder and holderCanvas styling:

#holder {position:relative; margin:20px 0px;}
#holderCanvas {width:80% !important; height:auto !important;}

Awesome, thanks :slight_smile:

1 Like