eldeibit
Registered User |
Quote
|
| 2021-02-21 10:44:56 |
|
Hi ! I'm trying to make coppercube responsive html. If the canvas measures more than 700px it shows an object, if the canvas measures less than 700px it shows it.
This is my code and it runs //Before first drawing do something
function myFunction(x) {
if (x.matches) { // If media query matches
var s = ccbGetSceneNodeFromName("cubeMesh1");
ccbSetSceneNodeProperty(s, "Visible", false);
} else {
var s = ccbGetSceneNodeFromName("cubeMesh1");
ccbSetSceneNodeProperty(s, "Visible", true);
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
Does anyone see any errors? Thank you !
|
csp-games
Guest |
Quote
|
| 2021-02-21 23:23:51 |
|
Why, isn't it working? If so, what says the browser javascript console? It was reported the "do something before first drawing" would do it every frame - under bug reports. I see some lines should have a semicolon at the end, but browsers seem tolerant these days.
Thanks for sharing. It is great to have access to the html, css and js functionality from within CC.
|
eldeibit
Registered User |
Quote
|
| 2021-02-22 15:33:56 |
|
Thanks for the reply. Yes, for some reason it doesn't work.
|
csp-games
Guest |
Quote
|
| 2021-02-23 20:22:43 |
|
addListener and matchMedia I don't know - this is far from how I code, sorry but I can't help you with these.
But one thing people misunderstand is: "do something before start drawing" isn't meant to be executed only once at game start, but (correct me if I'm wrong) every frame BEFORE the frame is rendered. It gives us a way to insert JS at this position in the pipeline, that may have diffrent implications compared to a behavior. That may be useful in respect to collision handler, but also to access the canvas pixels. For example the WebGL command to copy the canvas to an array gave me a black screen in the array, when executed in the behaviour with onAnimate every frame. Only after I used this:
<script type="text/javascript" src="copperlichtdata/copperlicht.js"></script>
<script type="text/javascript">
function onFrameDrawing()
{
var mywidth=dd__canvas.width;
var myheight=dd__canvas.height;
var myheight2=myheight-4;
dd__gl.readPixels(0, 0, mywidth, myheight, dd__gl.RGBA, dd__gl.UNSIGNED_BYTE, myarr,0); // copy cc canvas to array
}
ccbRegisterOnFrameEvent(onFrameDrawing);
</script>
</head>
right in the html page head, it worked and array myarr contained the rgba data of the canvas. That was for an 80x80 pixel canvas (don't ask), so I had these globals:
myarr=new Uint8Array(80*80*4);
dd__canvas = document.getElementById('3darea');
dd__gl = dd__canvas.getContext('webgl2', {preserveDrawingBuffer: true});
|
){kind=link}