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 
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 
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:
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.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ā
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.
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!
