Question

大家！我正在尝试将我在Unity中制作的游戏的WebGL版本部署到我的Heroku应用程序中。我必须更改WebGL构建的index.html文件的设置方式，使其与Heroku期望找到静态文件（.js，.css，图像等）的位置对齐，但是还是有些错误-我遇到以下错误尝试通过Heroku在Firefox中本地测试index.html页面：

SyntaxError：JSON.parse：第1行第1列的意外字符 JSON数据

这似乎与前段时间发布的问题类似：https://answers.unity.com/questions/1334307/unexpected-character-at-line-1-column-1-of-the-jso.html

不幸的是，在这个问题上提出的所有解决方案都不适合我。我怀疑这与放置Unity WebGL构建中Build文件夹的位置有关，该文件夹包含template.json，该文件必须由UnityLoader.js脚本解析才能运行Unity构建。似乎没有明显的位置，所以我将其固定在static / js下，因为这是UnityLoader.js所在的位置。但是似乎Heroku找不到Build文件夹，因为每次加载index.html页面时，我都会在Heroku CLI中收到404错误：

“获取/％UNITY_WEBGL_BUILD_URL％HTTP / 1.1” 404 97

如果有人对在为Heroku修改Unity WebGL构建时可能做错了什么或导致JSON读取错误的原因有任何见解，请告知！（我通过JSONLint运行了template.json文件，它是有效的JSON）

我的index.html文件的代码：

<!DOCTYPE html>
{% extends 'workshoptemplate.html' %}

{% load staticfiles %}
{% load static %}

{% block head %}
    <link rel="shortcut icon" href="{% static 'assets/favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <script src="{% static 'js/UnityProgress.js' %}"></script>  
    <script src="{% static 'js/UnityLoader.js' %}"></script>
{% endblock %}

{% block content %}
<!-- <html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Game</title>


    <script>
     // var gameInstance = UnityLoader.instantiate("gameContainer", "Build/templates.json", {onProgress: UnityProgress});
    </script>
  </head> 
  <body> !-->
    <div class="webgl-content">
      <div id="gameContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">Spatial Game #1</div>
      </div>
    </div>

{% endblock %}

{% block javascript %}
    <script type="text/javascript">

        var gameInstance = UnityLoader.instantiate("gameContainer", "Build/templates.json", {onProgress: UnityProgress});
    </script>
{% endblock %}

<!--
    </body>
</html> !-->

我的index.html文件扩展的workshoptemplate.html的代码：

{% load staticfiles %}
<!DOCTYPE HTML>
<html>

<head>
  <!--     boostrap -->
    <!-- <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"> -->
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <!-- Bootstrap -->
    <!-- <link href={% static "css/bootstrap.min.css"%} type='text/css' rel="stylesheet"> -->

      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
  <!--     boostrap above -->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=10; chrome=1;">
    <meta name="fragment" content="!">
    <meta name="viewport" content="width=device-width">
    <base target="_blank">
    <title>Spatial Games Research</title>
    <link href="{% static "css/formview_st_ltr.css"%}" type='text/css' rel='stylesheet'>
    <link href="{% static "css/mobile_formview_st_ltr.css"%}" type='text/css' rel='stylesheet' media='screen and (max-device-width: 721px)'>
    <link href="{% static "css/index.css"%}" type='text/css' rel='stylesheet'>
    <link rel="stylesheet" type="text/css" href="{% static "css/pnotify.custom.min.css"%}">
    <link href='http://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="{% static "js/jquery.min.js" %}"></script>
    <script type="text/javascript" src="{% static "js/jquery-ui.min.js" %}"></script>
    <script type="text/javascript" src="{% static "js/pnotify.custom.min.js" %}"></script>
    <script type="text/javascript">
    window.history.forward();
    </script>
    {% block head %}
    {% endblock %}
</head>

<body>

  <div itemscope itemtype="http://schema.org/CreativeWork/FormObject" style="padding-top:90px">
          <meta itemprop="name" content="Spatial Reasoning Test">
          <div class="ss-form-container">
            <div class="ss-top-of-page">
              <div class="ss-form-heading">
            <!-- <h1 class="ss-form-title" dir="ltr">Spatial Reasoning Assessment</h1> -->
              </div>
    </div> 


 <!--    <body dir="ltr" class="ss-base-body">
        <div itemscope itemtype="http://schema.org/CreativeWork/FormObject">
            <meta itemprop="name" content="Spatial Reasoning Test"> 
            <div class="ss-form-container">
              <div class="ss-top-of-page">
                <div class="ss-form-heading">
                    <h1 class="ss-form-title" dir="ltr">Spatial Reasoning Assessment</h1> 
                </div>
            </div> -->

</body>


    {% block content %}
    {% endblock %}

 <!--   <div class="ss-form">
        <form action="" method=POST id=ss-form target=_self onsubmit="return validate_form(this)">
            {% csrf_token %} {% autoescape off %} {{content}} {% endautoescape %}
        </form>
    </div>
        </div>
    <div id="docs-aria-speakable" class="docs-a11y-ariascreenreader-speakable docs-offscreen" aria-live="assertive" role="region" aria-atomic></div>
    </div>
    </div>

</body>
!-->
<script type="text/javascript" src="{% static 'js/logic_index.js' %}"></script>
<script type="text/javascript">

    function saveLog( action, obj, callback ) {
        var pathname = window.location.pathname;
        var log = {"path": pathname, "action": action, "msg": JSON.stringify(obj)};
        console.log("LOG: ");
        console.log(log);
        $.ajax({
            type: "POST",
            url: "/hello/log/",
            data: log,
            success: function(response) {
                console.log("success!");
                if (callback != undefined) callback();
            },
            error: function(xhr, status, error) {
                alert(xhr.responseText);
            },
        });
    }
</script>
<!-- for javascript cookie function -->
<script src="{% static 'js/js.cookie.js' %}"></script>
<script>
    var csrftoken = Cookies.get('csrftoken');



    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    $.ajaxSetup({
        crossDomain: false, // obviates need for sameOrigin test
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

//  comment this out when study is offline PLACE HOLDER
    $(function(){
        saveLog("LOAD", []);
    })


/*  $(function(){
        // initialize tooltips
        $('[data-toggle="tooltip"]').tooltip({
            html: true,
        })
    })*/
</script>
{% block javascript %}
{% endblock %}

</html>

将Unity WebGL游戏部署到Heroku的JSON问题

0 个答案: