I am modifying the HTML5 port of the game Jump'n'Bump to run on Apple and Android-based mobile devices. I use a cheap 1 GHz Cortex-A8 Android 4.0.3 tablet for testing. I have encountered strange behaviour in the system's Browser. I normally get a very low frame-rate of about 1 FPS (entire screen is re-drawn every frame, setTimeout is used...). However, when I add a <div> which has a position:fixed CSS attribute before the <canvas> tag, the frame-rate skyrockets and the game becomes playable.
Could someone please explain this odd phenomenon? Are there some rendering modes in the Android Browser which influence canvas performance? Is this a cross-platform issue? How do I make sure the page works efficiently in the user's browser?
An outline of the code I'm working on:
<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">
<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body { margin: 0px 0px 0xp 0px }
canvas { border: 0px solid black; }
img.resource { display:none; }
#fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
#gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
canvas {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit
image-rendering: optimize-contrast; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE
}
</style>
<body onload="init()" text="#FFFFFF" bgcolor="#000000">
<!-- image resources like this here: -->
<img class="resource" id='rabbits' src='rabbit.png'/>
<!-- *** remove the line below and the game slows down *** -->
<div id='fixed_div'></div>
<div id="gameArea"><canvas id="screen" width="400" height="256"></canvas></div>
</body>
</html>
This issue is so curious.
Try using Request Animation Frame instead of setInterval (without the magic div, =])
function getRequestAnimFrame() {
var game = this;
// requestAnim shim layer by Paul Irish
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / fps);
};
}
Maybe this help to increase the perform.
Related
Im having a little trouble with Firefox and perspectiveOrign. What i want is the origin to be controlled by mousemovement. So i calculate the percentages for origin, and set them like:
document.querySelector('parent').style.perspectiveOrigin = x% y%.
Logging the the value shows that perspectiveOrigin HAS changed but the interface just dosnt follow... or is very very very jaggy. I works like a charm in chrome and safari.
Is there something special i need to do to make Firefox update the UI with the values that it actually already has.
I made a little example here. the x/y percentages for origin is generated randomly onclick. I chrome - it will follow no matter how fast you are clicking, i Firefox - it follows if you click very slowly, but stops updating if you are clicking too fast.
(Im using Firefox Developer Ed. version: 104)
----After having posted this I ran the code-snippet below in the very same Firefox - and it works like it should. But running the EXACT same code from VSCode with LiveServer gives me the problem right away... Is there some polyfill active in the code runner - if so what polyfill?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container {
display: inline-block;
border: 1px solid black;
perspective: 10px;
perspective-origin: 50% 50%;
width: 600px;
height: 500px;
}
div {
border: 1px solid red;
}
.layer1,
.layer2,
.layer3 {
position: absolute;
inset: 0;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="container" onclick="changeOrigin()">
<div class="layer1" style="transform: translateZ(-5px)"></div>
<div class="layer2" style="transform: translateZ(-15px)"></div>
<div class="layer3" style="transform: translateZ(-25px)"></div>
</div>
<script>
const myDiv = document.querySelector(".container");
function changeOrigin() {
console.log("in change origin");
x = Math.random() * 100 + "%";
y = Math.random() * 100 + "%";
myDiv.style.perspectiveOrigin = `${x} ${y}`;
}
</script>
</body>
</html>
I have a page that looks like this
The width of the datetimepicker that you see on the picture cant get any smaller.
So what happends when the width is over 1200 px and under about 1550 px is that the datepicker goes outside of its place like this:
When the width is 1550 px or over the width is wide enough to fit the datetimepicker
And when the width is below 1200 the responsiveness kicks in and makes the page look good like this
So what i need help with is how to set for the responsiveness to kick in att 1550 instead of 1200. Is this possible, if yes how?
you can also fix overflow content like this
.button-container {
padding-left: 0;
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-align: baseline;
align-items: baseline;
margin-bottom: 30px;
}
.button-container {
max-width: 300px;
}
.button-wrapper {
background-color: lightblue;
flex-shrink: 0;
}
.button-wrapper button{
padding:5px 15px;
border-radius:5px;
border:1px solid #000;
margin:10px;
}
.button-container::-webkit-scrollbar {
width: 2px;
height:8px;
}
button-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
background: #ff9b51;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
background: gray;
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-container">
<div class="button-wrapper">
<button type="button" class="btn-default">Range</button>
<button type="button" class="btn-default">Week</button>
<button type="button" class="btn-default">Month</button>
<button type="button" class="btn-default">Quarter</button>
<button type="button" class="btn-default">Year</button>
</div>
</div>
You can easily add custom 'breakpoints' to your css in the form of a media query.
#media only screen and (max-width: 1550px) {
// type your styles here
// set your content to be vertically aligned
}
Let me know if this helps :)
I have read this highly useful post which unfortunately did not resolve my question: How may I use code in the HTA to scale down (shrink) the entire contents of the window, text and boxes both, in an HTA file? I'm using IE11 (or, it uses me), and I need to Ctrl-Scroll to downsize the window content every time I open it.
Now, I added meta http-equiv="x-ua-compatible" content="ie=edge" as suggested in comments, but now that breaks the placement of the file at position 1920,0 . Is there a solution which will allow resizing AND allow me to place the window where I need it?
<html><title>A Form </title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />.
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#365ebf', gradientType='0');">
<head>
<script language="JavaScript">window.resizeTo(320,1080);</script>
<style type="text/css">
body {
transform: scale(0.9);
height: 90%;
background-color: #EFEFDC;
font-family: Arial Narrow;
font-size: 12px;
color: #343421;
margin: 2px;
filter: none !important;
}
b {
font-size: 16px;
padding: 1en;
}
</style>
<SCRIPT Language="VBScript">
Sub Window_Onload
window.moveTo 1920, 0
End Sub
</SCRIPT>
I reread your question and your comments and I think I understand your requirements better. To programmatically increase the zoom level of all your controls use something similar to:
<script>
document.body.style.zoom = "200%"
</script>
Feel free to add this code anywhere, I tried it at the end of the script body and it worked for me:
<html>
<head>
<title>A Form</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html {
height: 100%;
}
body {
-ms-zoom: 0.50;
background-image: linear-gradient(135deg, #C0CFE2, #365ebf);
}
</style>
</head>
<body>
What is your name?<p>
<input id="name" value="Luke"></input><p>
<input type="button" value="CLICK ME" onclick="alert('Obi-Wan says: Use the Force, ' + document.getElementById('name').value + '.')"><p>
</body>
<script>
window.moveTo(100, 300);
window.resizeTo(500, 300);
</script>
<script>
document.body.style.zoom = "200%"
</script>
</html>
So I plan on making this really long image, its small right now, but I increased the height out to how long I expected it to be. Here's my code so far:
<!doctype html>
<meta charset="utf-8">
<head>
<style>
body {background-color: black}
.image {background-image: url('http://i.imgur.com/JrsEkO9.jpg');
width: 640px;
height: 25000px;
position: absolute;
left: 50%;
top: 40%;
margin:-228px 0 0 -400px;
repeat-x: no;
-webkit-background-size: 640px 25000px;
min-width: 640px;
min-height: 25000px;}
</style>
</head>
<html>
<body>
<div class="image">
</div>
</html>
</body>
It looks like I was hoping it would on a desktop, but when opened on an ipad the image is fuzzy. Any suggestions? Here's a link to see the problem: http://bit.ly/HrG9oc
My page has a resolution of 800x480. It has been designed as such. Now in Firefox (I have control over the viewers machine), I want to zoom the whole screen to 800x600. I know that there is a zoom option, but that does it proportionally (e.g. 150%). Is it possible to somehow to only stretch the 480 to 600 (a sort of a zoom).
I have a valid reason to do this and am aware of the aspect ratio issues that could arise.
Thank you for your time.
You can do this in Firefox 3.5 (Gecko 1.9.1) using CSS3 2d transforms.
Here's an example with two DIVs where the second is stretched from 800x480 to 800x600.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
background-color: #000;
color: #fff;
}
.viewport
{
width: 800px;
height: 480px;
background-color: gold;
color: #000;
position: absolute;
left: 0px;
top: 0px;
}
.stretched
{
background-color: rgba(255, 0, 0, 0.5);
-moz-transform: scaleY(1.25);
-moz-transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="viewport"><button>Normal</button></div>
<div class="viewport stretched"><br><br><button>Stretched</button></div>
</body>
</html>
See also:
Using CSS transforms
You can use:
self.resizeTo(width, height);
Although I think Firefox has a default setting in the preferences which prevents this from working.