Can I create a game for webgl without the Unity logo when I download and without title "Unity webGL"?
. example
According to the docs you need a Pro license to remove the splash screen. (the logo in the middle of the screen)
As for the frame around the game that's easy to change, just change the HTML as documented here. You can choose either one of the defaults or create your own template.
According to those docs you create folder in Assets called WebGLTemplates and inside that create a new folder for your template like BetterTemplate. Inside that put an index.html file and any other images, css, JavaScript files you want included with your game.
The index.html could look something like this
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>%UNITY_WEB_NAME%</title>
<style>
body { margin: 0; }
#gameContainer { width: 100vw; height: 100vh; }
canvas { width: 100%; height: 100%; }
</style>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/dist.json");
</script>
</head>
<body>
<div id="gameContainer"></div>
</body>
</html>
Then you pick Edit->Project Settings->Player from the menus and under the WebGL tab choose your template
Here's an example that provides a custom logo. The part that's not removable without a Pro license is the "Made with Unity" that appears just before the game starts.
With the personal license you are unable to legally remove the Unity splash screen. You need the Plus or Pro license. Plus costs $35 a month, Pro is $125 a month.
The majority of the features of Plus and Pro are not needed for smaller projects and with no hurt your development. All engine features are the same across the board, so you can always develop you game with a personal license.
When it comes time to launch you can buy Plus or Pro and remove the splash screen and take advantage of the performance reporting and analytics features that come with it.
Related
we use the Adsense "Auto Ads" and are generally very happy with it. Unfortunately we have a problem with the CLS (Cummulative Layout Shift) on our mobile (!) site. We have now tested this out and the problems are definitely triggered by the Auto Ads. After further testing, we were able to determine that it is specifically the sticky anchor ads in the header area of the page that trigger the CLS. Important: the shift does not happen when loading the page, but when scrolling down and up after the anchor ad has appeared at the top. At this point Adsense add some style attributes to all elements on our page, eg. "height: auto !important;" Does anyone also have this problem? What can we do? We would not like to go on without the sticky anchor ads. Important: Problem is mobile only! Is Google Adsense working on this? Thank you!
as google ads (especially the top anchor one) is ANIMATING the PADDING on BODY after you scroll down the page, the ad appears, and you scroll up, there is no way to avoid the CLS, only to create fixed
<style>
body {
padding: 120px 0px 0px !important;
}
</style>
so the once the ad appends its "style" with padding to body and starts to change it, nothing will happend due to "!important" tag in our style ... you can make an IF statement to use this only if your page is displayed on mobile (not sure this happens on wide PC anchors as well, have to test it, but I see my CLS going down on PC as well, so might be)
As there is no real way to "force" the size of auto ads in adsense
Set max height of Adsense responsive ad unit
for me i found out google allways delivers 300px high ads on mobile phones while 280px on tablets and desktop so i "reserve" this space in my responsive layout above the fold
with CSS as described here https://support.google.com/adsense/answer/9183363?hl=de here https://support.google.com/adsense/answer/9467650?hl=en-GB and here https://support.google.com/adsense/forum/AAAAKDuOfxQTiihLH_gMnw/?hl=en&gpf=%23!topic%2Fadsense%2FTiihLH_gMnw
.werbung { height: 300px; }
#media (min-width:800px) { .werbung { height: 280px; } }
#media (min-width:500px) { .werbung { height: 280px; } }
example:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-#####"
crossorigin="anonymous"></script>
<div class="werbung">
<ins class="adsbygoogle werbung"
style="display:block"
data-ad-client="ca-pub-#####"
data-ad-slot="#####"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
We had the same problem with Adsense injecting style: auto !important; - it was breaking our scroll and causing menus to display off screen on our mobile pages.
We solved it through the use of a little javascript that allows Adsense to load its ads with style: auto !important; and the script will quickly re-assign your div style back to how you need them to allow your page to operate normally. You can view the article here
Hope it helps.
Alright, so I set up a website using Github a while ago. I use it as a showcase for programming projects I'm working on, but that's beside the point. For a while now I've been trying to add an icon to my website, and for the life of me I can't figure out how. Help please.
If by icon you mean the image you see on the browser tab 32x32 pixels, that is usually in a format called Favicon.
You just need the image of your icon in favicon format (google how to convert an image to favicon and you will find websites that do this for you easily.), add it to your project and then add a tag on your hmtl head:
<head>
/* some style tags */
/* THE FOLLOWING IS YOUR 'ICON' */
<link rel="icon"
type="image/png"
href="./style/images/logo.favicon">
</head>
But this question should definitely not be under git tags. You did not mention why one should keep in mind that you are using github.
I read a lot of articles about how build a web site for iphone, all people have more and less the same technique for optimization a website for iphone.
I follow the suggestions, I use the difference css file (iphone.css - i just need the optimization for iphone not all phone) and I tried with a IE conditional and without. I tried also a inline css, inside a common style.css. And finally i also add a meta tag with scalation...but nothing! The iPhone doesn't want read my rules.
I don't have a iPhone i use iPhoney program (I also tried something else but they aren't very good) and sometimes I check form friends iPhone.
My problem is that my main menu that is long like all the page break and going down over the content. Just this. I just need to tell that the screen is more little (min-width-divide) but it doesn't work! And the css doesn't work (i tried to put #menu: display:none and the menu was still there). But the directory is right because if i see the site form my laptop i can see the css and can go inside!
The web site is built in wp, i don't know if it's important but it's so simple web site.
Make sure you target the iPhone with something like this:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"
href="mobile.css">
<!--<![endif]-->
Our team uses Trac heavily for project management, and I need to view the Trac site from time to time. Yet, it's really inconvenient to view the Trac site from the mobile device (it's an iphone in my case).
I wonder if there is any existing hack / plugin / template / css suite that could help display Trac better on the mobile devices? I thought some <meta> tags and css positioning should make the trick, yet I could not google out much from this.
any help is appreciated.
thx a lot!
Consider reading TracInterfaceCustomization in Trac's wiki for a start, more specifically about using style.css as I agree that you'll certainly need to change site-wide styles.
Ready-made themes are available at trac-hacks.org. Maybe you'll find something suiting your need at least a bit better than Trac default for a quicker start.
And finally the ThemeEnginePlugin seems like a great tool to put your ideas into reality quickly, although I've never tested this on my own by now. Good luck.
Ok, it took me a while to work out this. This is not perfect, neither good, but at least it looks a little better for me.
here is what I have done:
in the folder of [trac root]/templates/, add or edit the site.html, which contains the following:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/" py:strip="">
<head py:match="head" py:attrs="select('#*')">
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
${select('*|comment()|text()')}
<link media="handheld, screen and (max-device-width: 480px)" href="/htdocs-trac/css/trac-mobile.css" type="text/css" rel="stylesheet" />
</head>
<!--! Custom match templates go here -->
</html>
the above would add a new CSS link of /htdocs-trac/css/trac-mobile.css for every Trac page, and then u could put the mobile-device-only styles inside the css file, in my case, the css file contains:
.nav li {
white-space: normal;
}
#mainnav *:link, #mainnav *:visited {
padding: 0 10px;
}
#mainnav *:link, #mainnav *:visited {
padding: 0 0px;
}
#header h1 {
margin: 0;
}
honestly, it ONLY makes the title bar appeared better, and the button not collided. But a lot of places use table based layout, and (seems) could not be solved by css easily.
Hope it helps for others.
After peeking at the SO source, I noticed this tag:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Which after a quick Google revealed an Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).
The only other one that jumps to mind is the:
<input type="search" results="5"/>
(source: alexking.org)
This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.
I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
Allows you to set the width, height and scale values
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Set the status bar style, pretty self explanatory.
<meta name="apple-mobile-web-app-capable" content="yes" />
As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.
There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Thought I'd add my own answer with some new things I've seen crop up.
1.) There's an option for providing a higher definition iPhone 4 retina display icon
<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>
2.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />
3.) You can make iPhone links for phone/sms texting directly do the desired action
Call us
Text us
4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation
<script type="text/javascript">
function orient(){
switch(window.orientation){
case 0:
document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
5.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.
<link rel="stylesheet" type="text/css" href="../iphone4.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thanks to #Sarah Parmenter over on 24 ways for this added information.
A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.
The above mentioned documentation has moved. These are the new locations.
Safari HTML Reference:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari Web Content Guide:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
#scunliffe I took your orientation switch a step further:
function orient(o){
switch(o){
case -90:
case 90:
$('#container').removeClass().addClass('landscape');
break;
default:
$('#container').removeClass().addClass('portrait');
break;
}
}
It turns out, there are a lot of them!
I found this one interesting:
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won’t add any effects to the icon.
precomposed is available to iPhone OS
2.0 and later
The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).
Safari Web Content Guide