2Bbear's knowledge workshop

6. 디자인 수정..다시 홈페이지 만들기.

중단한 프로젝트/WebGameProject(중단)2019. 1. 5. 03:27

1. 아무리 봐도 기존의 디자인이 맘에 안든다. 그때 우리가 선택해야 할 것은?

 템플릿.


https://startbootstrap.com/


이 곳에서 이쁜 템플릿을 다운 받습니다.


2. 그리고 수정합니다.


<!DOCTYPE html>

<html lang="en">

<head>

<title></title>

<meta charset="utf-8">


<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">


<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->


<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">


</head>

<body id="top">

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- Top Background Image Wrapper -->

<div class="bgded overlay" style="background-image:url('images/demo/backgrounds/01.png');"> 

  <!-- ################################################################################################ -->

  <div class="wrapper row1">

    <header id="header" class="hoc clear"> 

      <!-- ################################################################################################ -->

      <div id="logo" class="fl_left">

        <h1><a href="index.html">Jungho's Game - Canopus </a></h1>

      </div>

      

      <nav id="mainav" class="fl_right">

        <ul class="clear">

          <li class="active"><a href="index.html">Home</a></li>

          <li><a class="drop">번역</a>

          <ul>

                  <li><a href="http://localhost:8080/WebGame2/index.html">한글</a></li>

                  <li><a href="http://localhost:8080/WebGame2/index-eng.html">Eng</a></li>

          </ul>

          </li>

        </ul>

      </nav>

      <!-- ################################################################################################ -->

    </header>

  </div>

  <!-- ################################################################################################ -->

  <!-- ################################################################################################ -->

  <!-- ################################################################################################ -->

  <section id="pageintro" class="hoc clear">

    <div> 

      <!-- ################################################################################################ -->

      <h2 class="heading">Canopus</h2>

      <p>우리는 길을 찾아야 합니다. Canopus는 당신의 길잡이가 되어 줄 것입니다.</p>

      <p> 그러니 Canopus를 찾고, 닿으세요.</p>

      <p>그것 만이 목표입니다.</p>

      

      <!-- ################################################################################################ -->

    </div>

  </section>

  <!-- ################################################################################################ -->

</div>

<!-- End Top Background Image Wrapper -->

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- Area Introduce Creator################################################################################################ -->

<div class="wrapper row2">

  <section class="hoc container clear"> 

    <!-- ################################################################################################ -->

    <div class="sectiontitle">

      <h6 class="heading">Introduce Creator</h6>

      <p>좋은 게임을 만들기 위해 당신이 생각하지 못한 이상한 방향으로 노력하는 게임 제작자입니다.</p>

    </div>

    <ul class="nospace group services">

      <li class="first">

        <article><a href="#"><img  src="images/icon/CreatorIcon.jpg" ></a>

          <h6 class="heading font-x1"><a href="#">Creator</a></h6>

          <p>안녕하세요. 저는 Canopus를 만든 2bbear입니다.</p>

          <p>먼저 이렇게 Canopus를 하기 위해 방문해주셔서 감사합니다.</p>

          <p>저는 게임 프로그래머로써 게임에 다양한 시도를 통해 연구를 하고 있습니다.</p>

          <p>궁금한 것이 있다면 사이트 하단의 메일로 연락을 주세요.</p>

        </article>

      </li>

      

    </ul>

    <!-- ################################################################################################ -->

    <div class="clear"></div>

  </section>

</div>

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!--  Area Game ################################################################################################ -->

<div class="wrapper row3">

  <main class="hoc container clear"> 

<div class="wrapper" id="mainarea">

<div class="alert alert-warning centered-axis-xy" style="min-height: 20px; display:none;" role="alert" id="compilingmessage">

<div id='loadTasks'> </div>

</div>

<canvas id="canvas" class="emscripten" oncontextmenu="event.preventDefault()" style="display:none;">

</div>

<div style="text-align:center;">

<div >

<button type="button" class="btn btn-primary" onclick="Module['pauseMainLoop']();">Pause</button>

<button type="button" class="btn btn-primary" onclick="Module['resumeMainLoop']();">Resume</button>

<button type="button" class="btn btn-primary" id="fullscreen_request">FullScreen</button>

</div>

</div>

<div class="texthalf text-normal jumbotron " id="logwindow" style='display:none'></div>


<script src="MYCONTENTS\HTML5\HowToMakeHTML5.UE4.js"></script>

  </main>

</div>

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- Area Mailing################################################################################################ -->

<div class="wrapper row4 bgded overlay" style="background-image:url('images/demo/backgrounds/02.png');">

  

  

  <footer id="footer" class="hoc clear"> 

    <!-- ################################################################################################ -->

    <div id="pageintro" class="hoc clear" >

      <h6 class="heading">Aliquam non fermentum</h6>

      <ul class="nospace btmspace-30 linklist contact">

        <li><i class="fa fa-phone"></i> +82 (10) 5948 5781</li>

        <li><i class="fa fa-envelope-o"></i> jjh.twobbear@gmail.com</li>

      </ul>

      <ul class="faico clear">

<li>

<form class="gform pure-form pure-form-stacked" method="POST" data-email="example@email.net" action="이건 보여줄 수 없엇! 보지맛! ">

    <!-- change the form action to your script url -->

    <div class="form-elements">

      <fieldset class="pure-group">

        <label for="name">Name: </label>

        <input id="name" name="name" placeholder="What your Mom calls you" />

      </fieldset>

      <fieldset class="pure-group">

        <label for="message">Message: </label>

        <textarea id="message" name="message" rows="10"

        placeholder="Tell us what's on your mind..."></textarea>

      </fieldset>

      <fieldset class="pure-group">

        <label for="email"><em>Your</em> Email Address:</label>

        <input id="email" name="email" type="email" value=""

        required placeholder="your.name@email.com"/>

        <span class="email-invalid" style="display:none">

          Must be a valid email address</span>

      </fieldset>

      

      <button class="button-success pure-button button-xlarge">

        <i class="fa fa-paper-plane"></i>&nbsp;Send</button>

    </div>

    <!-- Customise the Thankyou Message People See when they submit the form: -->

    <div class="thankyou_message" style="display:none;">

      <h2><em>Thanks</em> for contacting us!

        We will get back to you soon!</h2>

    </div>

  </form>

 

</li>

      </ul>

    </div>

 

    <!-- ################################################################################################ -->

  </footer>

</div>

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<div class="wrapper row5">

  <div id="copyright" class="hoc clear"> 

    <!-- ################################################################################################ -->

    <p class="fl_left">Copyright &copy; 2019 - All Rights Reserved - <a href="#">Jungho's game</a></p>

    <!-- ################################################################################################ -->

  </div>

</div>

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>

<!-- JAVASCRIPTS -->

<script src="layout/scripts/jquery.min.js"></script>

<script src="layout/scripts/jquery.backtotop.js"></script>

<script src="layout/scripts/jquery.mobilemenu.js"></script>

</body>

</html>

ue4 게임을 이 index.html에 올리기 위하여  js와 data, 그리고 음원을 넣기 위해 wasm을 밖으로 빼내야만 했습니다. 아니면 직접 HowToMakeHTML5.js파일을 수정해줘야 할 것 같은데. 저 파일이 이상한건지 열려고만 하면 너무 렉이 걸리고 힘들어서 그냥 포기하기로 했습니다.


나중에 ue4 빌드 세팅쪽을 건드려서 다시 수정해보면 될 것 같습니다.




이렇게 수정하고....


이 안에 ue4 게임, 구글 이메일 보내는 기능이 들어가 있습니다.

그렇게해서 이렇게 게임용 웹 사이트를 만들었습니다.


엉망진창인거 같은데....이제 게임쪽 만들어야 해서 더 이상 웹은 만지기 싫습니다. 으으....

역시 전 퍼블리셔와 적성이 안 맞는거 같아요.


차라리 쓰레드를 만지고 패킷을 더 만지는게 좋을 것 같네요.

'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글

8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편  (2) 2019.01.07
7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02

티스토리툴바