[SOLVED] Ren'py web problem

[MisterHarold]

I want to export my ren'py game to web using beuc's web exporter. Everything is good except for some codes popping up whenever I go to the gallery/extras page of my VN.

If there's anyone who can help, I'd appreciate it. thanks

[isobellesophia]

There is obviously a Web button in Renpy, making your games into web. I dont think it has the same site when clicked both Beuc's one or in launcher itself, or there has to be something in your code with it. With your gallery code.

[MisterHarold]

ok, I was told it was because of print() commands that were in the .rpy script. How do I remove them?

[isobellesophia]

ok, I was told it was because of print() commands that were in the .rpy script. How do I remove them?

Maybe remove the lines were the code was shown in the web, i guess it was inside the print().

You can remove them, or dont, it depends on you if you ever need the print or no..

[MisterHarold]

For having the same problem as mine when they try to export their VN to web I have found a solution. I messed around with the index.html and added some codes to hide the black bar on top and the text. The text doesn't really hide completely, just turned transparent so when I mouse hover around the screen the cursor will turn into text select mode because the text is still there. I added some codes to make the text unselectable and can also click through it

Code: Select all

<style>
      body {
        font-family: arial;
        margin: 0;
        padding: none;
      }

      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
      div.emscripten { text-align: center; opacity: 0; }
      div.emscripten_border { border: 1px solid black;  }
      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
      canvas.emscripten { border: 0px none; background-color: black; width: 100vw; height: 100vh; }

      #emscripten_logo {
        display: inline-block;
        margin: 0;
		opacity: 0;
      }

      .spinner {
        height: 30px;
        width: 30px;
        vertical-align: top;
        position: absolute;
		opacity: 0;
		pointer-events: none;
        -webkit-animation: rotation .8s linear infinite;
        -moz-animation: rotation .8s linear infinite;
        -o-animation: rotation .8s linear infinite;
        animation: rotation 0.8s linear infinite;

        border-left: 5px solid rgb(235, 235, 235);
        border-right: 5px solid rgb(235, 235, 235);
        border-bottom: 5px solid rgb(235, 235, 235);
        border-top: 5px solid rgb(120, 120, 120);

        border-radius: 100%;
        background-color: rgb(189, 215, 46);
      }

      @-webkit-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
      }
      @-moz-keyframes rotation {
        from {-moz-transform: rotate(0deg);}
        to {-moz-transform: rotate(360deg);}
      }
      @-o-keyframes rotation {
        from {-o-transform: rotate(0deg);}
        to {-o-transform: rotate(360deg);}
      }
      @keyframes rotation {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
      }

      #statusbar_container {
        position: fixed;
        top: 0;
        width: 100%;
        margin: auto;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		pointer-events: none;
		opacity: 0;
		
      }

      #statusbar {
        width: 50%;
        margin: auto;
        min-width: 340px;
        padding: 10px;
        height: 40px;
        background-color: rgb(40, 40, 40);
      }

      #status {
        vertical-align: top;
        font-weight: bold;
        color: rgb(120, 120, 120);
        width: 100%;
        padding-bottom: 2px;
        text-align: left;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		opacity: 0;
		
      }

      #progress {
        height: 20px;
        width: 100%;
		
      }


      #ContextContainer {
        position: absolute;
        left: 10px;
        top: 10px;
        color: white;
		pointer-events: none;
		
      }
      #ContextButton {
        text-decoration: none;
        color: grey;
        font-size: xx-large;
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
      }
      #ContextButton:focus {
        outline: none;
      }
      #ContextMenu a {
        text-decoration: none;
        color: lightgrey;
      }
      #ContextMenu a:hover {
        text-decoration: nsone;
        color: grey;
      }
      #ContextMenu {
        background-color: rgb(40,40,40);
        padding: 5px;
      }
    </style>

Add this to the css code in index.html
To hide

Code: Select all

opacity: 0;

To make the text unselectable

Code: Select all

	-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		

To click through

Code: Select all

pointer-events: none;