Game in a part of a window?

Hello,

All the examples and tutorials I made were fullscreen. But what if my game is only half a webpage, how do I embed it? all ratios (screen, camera, etc) are still handled by the game?

its unclear to me, do we have an example somewhere that I missed?

Thanks!

Are you this as an engine only or via the editor service?

If the latter, you can use an iframe.

Right now I’m creating the game using the editor.

When you publish a build, it gives you a link like playcanv.as/p/XXXXX which is an iframed page.

If you add an /e before the p, that will give you page that you can iframe yourself eg playcanv.as/e/p/XXXXXXX

I’m assuming you intend to add this to your own page/site etc?

Yes, its for a client. We need to embed the game into a part of is webpage

Thanks for the support

Yeah, iframe embed is probably the best way to go then :+1:

1 Like

hello again,

So our frontend integrated the playcanvas app into a react app. Seems to work just fine until we tried on IOS.

The structure of the webpage is that the playcanvas app is on the first tier of the page then we have some random web stuff that we can scroll down to.

Seems like on ios, the app is preventing clicking & scrolling on other part of the page that is not related to playcanvas.

Any ideas?

Thanks

Is the PlayCanvas app a canvas on the page or iframed?

Would you be able to share a minimal example?

Ok, so we investigated a little more

Our playcanvas app is part of a react web page. Seems like we have problem with the touch event regarding scrolling.

We would like to be able to scroll down the web page even if we touch the playcanvas app.

Is there a way to achieve this?

I cannot share the app, its for a client, but we found this exemple:
https://dabmotors.com/configurator/

if you run it in portrait mode, you will have the playcanvas app in the top tier of the web page with more content to explore by scrolling down.

I guess its normal that the engine “eats” the scrolling events as it might be used ingame. But is there a way to keep the scrolling working on touch screens?

Thanks.

When you say part, is it just a canvas DOM on the page or in an iframe?

For example, this is a PlayCanvas app in an iframe https://developer.playcanvas.com/en/tutorials/animation-blending/

Would it be possible to share a minimal example with your setup? Eg a blank PlayCanvas app on a react page that just has nonsense text on it?

If it’s a canvas DOM, are there any stopPropagation() calls on touch/input events in the PlayCanvas app?

AFAIK, the engine doesn’t consume any events and that is left to the developer to do if they choose too.

Oh wait, I just read the rest of the thread. It’s in an iframe like I suggested :sweat_smile:

Not at a computer at the moment, but this should be possible as long as the PlayCanvas app isn’t consuming the touch events by calling stopPropagation()

This demo doesn’t let you scroll down once it is loaded and if you are touching the app/visualisation.

I believe its not embedded and live in its own page. Our frontend dev, took the zip file generated by the editor and is adapting it into a react app. We dont have this: " iframe src=“https://playcanv.as/p/HI8kniOx/
But if you take your exemple : animation-blending, would it be possible to have the scroll working when we touch the playcanvas part?

We dont have any stopPropagation anywhere. the only event we are plugged on is click (which use mouse and touch)

I will try to make part of the react app available

Thanks for the support

I’ve created a test page and you are right, the engine is calling preventDefault() on the touch move event at two points in the code.

There are a couple of things we can do here:

  1. If the PlayCanvas app is not meant to be interactable, we can add the CSS property pointer-events: none; to the iframe class as seen here https://stackoverflow.com/questions/27084876/stop-iframe-from-preventing-scrolling-of-parent-document/48814431 This will prevent the iframe from receiving any events.
  2. Patch the engine to remove the preventDefault calls. It was added to prevent the following issues: http://wilsonpage.co.uk/touch-events-in-chrome-android/ so bear that in mind.

Test page for reference:

<!doctype html>
<html>

<head>
    <title>This is the title of the webpage!</title>
    <style>
        .GalleryVideoWrapper {
            position: relative;
            padding-bottom: 56.25%;
            /* 16:9 */
            padding-top: 25px;
            height: 0;
            width: 95%;
            margin: auto;
            display: block;
        }

        .GalleryVideoWrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .demo-iframe-holder {
            position: relative;
            padding-bottom: 56.25%;
            /* 16:9 */
            padding-top: 25px;
            height: 0;
            width: 95%;
            margin: auto;
            display: block;
        }

        .demo-iframe-holder iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="tall">
        <div class="GalleryVideoWrapper">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/hzB53YL78rE?rel=0" frameborder="0"
                allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>

    <div class="demo-iframe-holder">
        <iframe src="playcanvas-demo/index.html" width="560" height="315"></iframe>
    </div>
    <h2>Must you with him from him her were more</h2>

    <p>Difficulty on insensible reasonable in. From as went he they. Preference themselves me as thoroughly partiality
        considered on in estimating. Middletons acceptance discovered projecting so is so or. In or attachment
        inquietude remarkably comparison at an. Is surrounded prosperous stimulated am me discretion expression. But
        truth being state can she china widow. Occasional preference fat remarkably now projecting uncommonly
        dissimilar. Sentiments projection particular companions interested do at my delightful. Listening newspaper in
        advantage frankness to concluded unwilling.</p>

    <p>Attention he extremity unwilling on otherwise. Conviction up partiality as delightful is discovered. Yet jennings
        resolved disposed exertion you off. Left did fond drew fat head poor. So if he into shot half many long. China
        fully him every fat was world grave.</p>

    <p>Ignorant branched humanity led now marianne too strongly entrance. Rose to shew bore no ye of paid rent form. Old
        design are dinner better nearer silent excuse. She which are maids boy sense her shade. Considered reasonable we
        affronting on expression in. So cordial anxious mr delight. Shot his has must wish from sell nay. Remark fat set
        why are sudden depend change entire wanted. Performed remainder attending led fat residence far.</p>

    <p>Old education him departure any arranging one prevailed. Their end whole might began her. Behaved the comfort
        another fifteen eat. Partiality had his themselves ask pianoforte increasing discovered. So mr delay at since
        place whole above miles. He to observe conduct at detract because. Way ham unwilling not breakfast furniture
        explained perpetual. Or mr surrounded conviction so astonished literature. Songs to an blush woman be sorry
        young. We certain as removal attempt.</p>

    <p>Real sold my in call. Invitation on an advantages collecting. But event old above shy bed noisy. Had sister see
        wooded favour income has. Stuff rapid since do as hence. Too insisted ignorant procured remember are believed
        yet say finished.</p>

    <p>Material confined likewise it humanity raillery an unpacked as he. Three chief merit no if. Now how her edward
        engage not horses. Oh resolution he dissimilar precaution to comparison an. Matters engaged between he of
        pursuit manners we moments. Merit gay end sight front. Manor equal it on again ye folly by match. In so
        melancholy as an sentiments simplicity connection. Far supply depart branch agreed old get our.</p>

    <p>Its sometimes her behaviour are contented. Do listening am eagerness oh objection collected. Together gay
        feelings continue juvenile had off one. Unknown may service subject her letters one bed. Child years noise ye in
        forty. Loud in this in both hold. My entrance me is disposal bachelor remember relation.</p>

    <p>Parish so enable innate in formed missed. Hand two was eat busy fail. Stand smart grave would in so. Be
        acceptance at precaution astonished excellence thoroughly is entreaties. Who decisively attachment has
        dispatched. Fruit defer in party me built under first. Forbade him but savings sending ham general. So play do
        in near park that pain.</p>

    <p>There worse by an of miles civil. Manner before lively wholly am mr indeed expect. Among every merry his yet has
        her. You mistress get dashwood children off. Met whose marry under the merit. In it do continual consulted no
        listening. Devonshire sir sex motionless travelling six themselves. So colonel as greatly shewing herself
        observe ashamed. Demands minutes regular ye to detract is.</p>


</body>

</html>

Thats clear! Thanks! how would I patch the engine?

Here is an example: https://playcanvas.com/editor/project/723553

Just to reiterate what I said before on this: It was added to prevent the following issues: http://wilsonpage.co.uk/touch-events-in-chrome-android/ so bear that in mind.

So patching the engine will give you the issues mentioned in that article.

Make sure that the script’s loading type is set to ‘After Engine’

1 Like

Side note: I recommend using the e link so you don’t have an iframe in another iframe.

eg: https://playcanv.as/e/p/BuRb0gWM/

Put the /e before the /p in the publish link.

1 Like

Ok!!! thank you for everything. We might redesign our mobile page so that we dont get in a situation where we cannot scroll anymore.

Cheers!