2Bbear's knowledge workshop

7. web에 올라갈 간단한 게임을 만들자.-Coin편

중단한 프로젝트/WebGameProject(중단)2019. 1. 6. 07:13

준비물 : UE4 엔진.



1. 간단한 게임 기획


너무 많은 기능을 넣고 싶지 않기에 간단하게 미로 푸는 게임으로 합니다.



- 맵


이정도로 퉁치고


- 목표

저 동그란 걸 모으는 거에요 하와와.


- 캐릭터

간단한게 최고에요. 바꿀 수도 있는데 굳이 지금은 할 필요가 없죠



2. 기능 정의

ㄱ. ui

- 먹은 코인 수 출력

- Retry 횟수 출력

- GameOver 로고 출력

- Game logo Scene 만들기

- Game ending Scene 만들기

ㄴ. 내부기능

- 코인에 닿으면 먹는 기능

- 닿은 후 코인 오브젝트 삭제 기능

- GameManager 기능

- 게임의 시작, 중지, 끝을 관리

- 현재 플레이어가 모은 코인을 관리 (예 최대 코인 수 12/0 현재 먹은 코인수)

- Scene관리


개발 순서는~~~ ui 하고 내부 기능 하고~ 해야하는 거지만 난 내맘데로 만들꺼야!


3.내부 기능을 만들자


- 코인에 닿으면 먹는 기능을 만들자!


먼저 코인의 뼈와 기둥이 되어줄 C++ 코드를 작성합니다.


먼저 코인!


 //ACoin.h

// Fill out your copyright notice in the Description page of Project Settings.


#pragma once

#include "CoreMinimal.h"

#include "GameFramework/Actor.h"


#include "Coin.generated.h"


UCLASS()

class HOWTOMAKEHTML5_API ACoin : public AActor

{

GENERATED_BODY()

private:

//Sets Componetns

UPROPERTY(VisibleAnywhere, Category = "Config")

class UBoxComponent * pBoxCollision;

UPROPERTY(VisibleAnywhere, Category = "Config")

class UStaticMeshComponent * pStaticMesh;


public:

// Sets default values for this actor's properties

ACoin();


protected:

// Called when the game starts or when spawned

virtual void BeginPlay() override;

public:

UFUNCTION()

void OnOverlapBegin(class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult & SweepResult);

};

 //ACoin.cpp

// Fill out your copyright notice in the Description page of Project Settings.


#include "Coin.h"

#include "Runtime/Engine/Classes/Components/BoxComponent.h"

#include "Runtime/Engine/Classes/Components/StaticMeshComponent.h"

#include "Kismet/GameplayStatics.h"

#include "HowToMakeHTML5GameMode.h"

#include <string>


// Sets default values

ACoin::ACoin()

{

  // Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it.

PrimaryActorTick.bCanEverTick = false;

pBoxCollision = CreateDefaultSubobject<UBoxComponent>(TEXT("Boxcollision"));

pBoxCollision->SetGenerateOverlapEvents(true);


pStaticMesh = CreateDefaultSubobject<UStaticMeshComponent>(TEXT("StaticMesh"));


}


// Called when the game starts or when spawned

void ACoin::BeginPlay()

{

Super::BeginPlay();

UE_LOG(LogTemp, Warning, TEXT("ACoin::BeginPlay"));


FScriptDelegate DelegateBegin;

DelegateBegin.BindUFunction(this, "OnOverlapBegin");

this->OnActorBeginOverlap.Add(DelegateBegin);



pBoxCollision->SetupAttachment(RootComponent);

pStaticMesh->SetupAttachment(pBoxCollision);

}


void ACoin::OnOverlapBegin(AActor * OtherActor, UPrimitiveComponent * OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult & SweepResult)

{

UE_LOG(LogTemp, Warning, TEXT("ACoint::OnOverlapBegin"));

//Processing Score

AHowToMakeHTML5GameMode* temp=(AHowToMakeHTML5GameMode*)GetWorld()->GetAuthGameMode();

temp->addPlayerScore();

std::string str= std::to_string(temp->getPlayerScore());


TCHAR ch[20];

const char* all = str.c_str();

int len = 1 + strlen(all);

wchar_t* t = new wchar_t[len];

if (NULL == t) throw std::bad_alloc();

mbstowcs(t, all, len);

_tcscpy_s(ch,t);


UE_LOG(LogTemp, Warning, ch);

//Delete this object

Destroy(this);


}


그 다음에는 score를 관리해주고 게임을 관리해주는 GameMode 찡!

//AHowToMakeHTML5GameMode.h

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.


#pragma once


#include "CoreMinimal.h"

#include "GameFramework/GameModeBase.h"

#include "HowToMakeHTML5GameMode.generated.h"


UCLASS(minimalapi)

class AHowToMakeHTML5GameMode : public AGameModeBase

{

GENERATED_BODY()


public:

AHowToMakeHTML5GameMode();


private:

int playerScore;

public:

void setPlayerScore(int param);

int getPlayerScore();

void addPlayerScore();


};

 //AHowToMakeHTML5GameMode.cpp

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.


#include "HowToMakeHTML5GameMode.h"

#include "HowToMakeHTML5Character.h"

#include "UObject/ConstructorHelpers.h"


AHowToMakeHTML5GameMode::AHowToMakeHTML5GameMode()

{

// set default pawn class to our Blueprinted character

static ConstructorHelpers::FClassFinder<APawn> PlayerPawnBPClass(TEXT("/Game/ThirdPersonCPP/Blueprints/ThirdPersonCharacter"));

if (PlayerPawnBPClass.Class != NULL)

{

DefaultPawnClass = PlayerPawnBPClass.Class;

}

}


void AHowToMakeHTML5GameMode::setPlayerScore(int param)

{

if(param<0)

{

throw param;

}

playerScore = param;

}


int AHowToMakeHTML5GameMode::getPlayerScore()

{

return playerScore;

}


void AHowToMakeHTML5GameMode::addPlayerScore()

{

playerScore += 1;

}



간단하게 Coin Actor는 뭔가와 부딪히면 그대로 현재 게임 모드를 불러와서 거기에 score를 수정합니다. 


간단하죠?


-GameMode의 동전관리

총 동전 수를 알아와야 하고 현재 동전수를 관리합니다.

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.


#pragma once


#include "CoreMinimal.h"

#include "GameFramework/GameModeBase.h"

#include "HowToMakeHTML5GameMode.generated.h"


UCLASS(minimalapi)

class AHowToMakeHTML5GameMode : public AGameModeBase

{

GENERATED_BODY()


public:

AHowToMakeHTML5GameMode();


private:

int playerScore;

public:

void setPlayerScore(int param);

int getPlayerScore();

void addPlayerScore();


protected:

virtual void BeginPlay() override;

};

 // Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.


#include "HowToMakeHTML5GameMode.h"

#include "HowToMakeHTML5Character.h"

#include "UObject/ConstructorHelpers.h"

#include "Runtime/Engine/Public/EngineUtils.h"

#include "Coin.h"

#include <string>


AHowToMakeHTML5GameMode::AHowToMakeHTML5GameMode()

{


// set default pawn class to our Blueprinted character

static ConstructorHelpers::FClassFinder<APawn> PlayerPawnBPClass(TEXT("/Game/ThirdPersonCPP/Blueprints/ThirdPersonCharacter"));

if (PlayerPawnBPClass.Class != NULL)

{

DefaultPawnClass = PlayerPawnBPClass.Class;

}


}


void AHowToMakeHTML5GameMode::setPlayerScore(int param)

{

if(param<0)

{

throw param;

}

playerScore = param;

}


int AHowToMakeHTML5GameMode::getPlayerScore()

{

return playerScore;

}


void AHowToMakeHTML5GameMode::addPlayerScore()

{

playerScore += 1;

}


void AHowToMakeHTML5GameMode::BeginPlay()

{

Super::BeginPlay();

TActorIterator< ACoin > ActorItr =TActorIterator< ACoin >(GetWorld());

int currentWorldCoinCount=ActorItr.GetProgressNumerator();

currentWorldCoinCount -=2;

if(currentWorldCoinCount <0)

{

currentWorldCoinCount = 0;

}


//for debug===========================================================

UE_LOG(LogTemp, Warning, TEXT("AHowToMakeHTML5GameMode::BeginPlay()"));


std::string str = std::to_string(currentWorldCoinCount);

TCHAR ch[20];

const char* all = str.c_str();

int len = 1 + strlen(all);

wchar_t* t = new wchar_t[len];

if (NULL == t) throw std::bad_alloc();

mbstowcs(t, all, len);

_tcscpy_s(ch, t);


UE_LOG(LogTemp, Warning, ch);


//==============================================================

}

로그로 현재 동전의 수를 나타내 줍니다.


그런데 월드에서 찾는 Coin이 2개더 잡히는데...어디서 잡히는거지?...이거 의문이네..


아무튼 이렇게 해서 Coin편 끝.






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

9. 트러블....트러블....언리얼로 HTML을 만든다는 것은 무리인가.  (0) 2019.01.07
8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편  (2) 2019.01.07
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02

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

5. HTML로 이메일 보내는 기능 추가하기

중단한 프로젝트/WebGameProject(중단)2019. 1. 2. 11:46

이번에는 이메일을 보내는 기능을 추가해봅시다.


전달 받는 사람은 바로 사이트 게시자인 나일테고 보내는 사람은 불특정 다수가 될테니


보여지면 안되는 것

- 내 이메일


보여져야 하는 것

- 보내는 사람의 이메일

- 내용

- 보내는 날짜


============================================================

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how

서버없이 구글 api 이메일을 보내는 샘플

============================================================


기본적으로 server가 있어야하며 스팸방지 기능도 넣어야하고....구글 api에서 키도 받아와야하고...그런데 더 쉬운 방법이 있는거 같고....


백엔드 서버 없이 그냥 이메일을 보내는 것이 있다는 것 같은데. 나는 백엔드 서버를 이용해서 이메일을 보내고 싶은데.


그렇게 보내지 않아도 일단 기능적으로 실행 할 수 있는 정적 HTML email 보내는 방법이 있습니다.

참고 : 

https://kutar37.tistory.com/entry/%EC%A0%95%EC%A0%81-HTML-form%ED%83%9C%EA%B7%B8%EC%97%90%EC%84%9C-%EB%A9%94%EC%9D%BC%EB%B3%B4%EB%82%B4%EA%B8%B0-Google-Apps-Mail


1. html 코드

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

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

    <meta name="description" content="contact form example">

  <title>Contact Form Example</title>

</head>


<body>

  <h2 class="content-head is-center">Contact Us!</h2>

  <aside>

       <p>

           We would <em>love</em> to hear from you! </p>

           <p>Please use the <b><em>Contact Form</em></b>

           to send us a message.

       </p>

   </aside>


<!-- START HERE -->

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

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

   <!-- Style The Contact Form How Ever You Prefer -->

   <link rel="stylesheet" href="style.css">


  <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>


      <fieldset class="pure-group">

        <label for="color">Favourite Color: </label>

        <input id="color" name="color" placeholder="green" />

      </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>


  <!-- Submit the Form to Google Using "AJAX" -->

  <script data-cfasync="false" type="text/javascript"

  src="form-submission-handler.js"></script>

<!-- END -->


</body>

</html>

 


위 참고 주소를 통해 따라하면 이메일을 받아 볼 수 있다. 



2. 이제 내 프로젝트에 넣어보자.


<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="EUC-KR">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    


    <title>Jungho's Game - Brain Paralyzer</title>


    <!-- jQuery, 1.7+ is required -->

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->

    <script src="royalslider\jquery.royalslider.min.js"></script>


    <!-- main slider style -->

    <link href="royalslider/royalslider.css" rel="stylesheet">

    <!-- selected skin style -->

    <link href="royalslider\skins\default\rs-default.css" rel="stylesheet">


<script>

    // Slider initialization, you may put this part of code in JS file

    jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            navigateByClick : false,

            imageAlignCenter: true,

            transitionSpeed : 3000,

            autoPlay: {

                enabled: false,

                pauseOnHover : true,

                delay : 5000

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

            #backgorun-page{

           

            width:100%;

            height: 100%;

            background: #141e39;}

            

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

#content-slider .rsThumbs { background: #141e39;}


#slide-3{}

.button-sendmail{ font-size:400px;}

#slide-4-out{

  text-align: center;

  }

  #slide-4-in{

    width: 70%;

  height: 70%;

  margin: 40px auto;

  background: red;

  }


   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="backgorun-page">

    <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height: 950px; width: 100%;" >

      

      <div>

      <img class="rsIgm" src="img\GameIntro.jpg" alt="" style="width:100%">

      

      </div>

      <div>

<img class="rsIgm" src="img\CreatorIntro.jpg" alt="" style="width:100%">

</div>

      <div id="slide-3" >slide3

     

      </div>

     

    </div>

    <div>

      <h2 class="content-head is-center">Contact Us!</h2>

  <aside>

       <p>

           We would <em>love</em> to hear from you! </p>

           <p>Please use the <b><em>Contact Form</em></b>

           to send us a message.

       </p>

   </aside>

<!-- START HERE -->

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

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

   <!-- Style The Contact Form How Ever You Prefer -->

   <link rel="stylesheet" href="learn-to-send-email-via-google-script-html-no-server-master\style.css">

  <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>

      <fieldset class="pure-group">

        <label for="color">Favourite Color: </label>

        <input id="color" name="color" placeholder="green" />

      </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>

  <!-- Submit the Form to Google Using "AJAX" -->

  <script data-cfasync="false" type="text/javascript"

  src="form-submission-handler.js"></script>

<!-- END -->

     </div>

    </div>

    

  </body>

</html> 


억지로 집어 넣었는데 안 이뻐..




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

7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02
2. 웹페이지 디자인/기획  (0) 2019.01.01

4. royalslider 슬라이드에 이미지 집어넣기

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

넣는 코드

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    


    <title>RoyalSlider Example</title>


    <!-- jQuery, 1.7+ is required -->

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->

    <script src="royalslider\jquery.royalslider.min.js"></script>



    <!-- main slider style -->

    <link href="royalslider/royalslider.css" rel="stylesheet">

    <!-- selected skin style -->

    <link href="royalslider\skins\default\rs-default.css" rel="stylesheet">


<script>

    // Slider initialization, you may put this part of code in JS file

    jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            

            transitionSpeed : 3000,

        

            autoPlay: {

                enabled: false,

                pauseOnHover : true,

                delay : 5000

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

#content-slider .rsThumbs { background: #141e39;}

            #slide_1,

#slide_1 .rsOverflow,

#slide_1 .rsSlide,

#slide_1 .rsVideoFrameHolder,

#slide_1 .rsThumbs { background: #141e39;}

#slide_2,

#slide_2 .rsOverflow,

#slide_2 .rsSlide,

#slide_2 .rsVideoFrameHolder,

#slide_2 .rsThumbs {background: #141e39;}

   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:950px; width: 100%;" >

      

      <div>

      <img class="rsIgm" src="img\GameIntro.jpg" alt="" style="width:100%">

      

      </div>

      <div>

<img class="rsIgm" src="img\CreatorIntro.jpg" alt="" style="width:100%">

</div>

      <div>slide3</div>

      <div>slide4</div>

    </div>


    


  </body>

</html>


이렇게 넣고 프로젝트에도 이미지 파일을 넣어 놓으면 이미지가 출력된다.



문제점


이렇게 통 이미지로 할 경우 원하는 형태로 꾸미기에는 좋지만 이후 수정하기가 여간 까다로운 것이 아니다.


따라서 슬라이드 안의 요소들을 각각 수정 가능한 형태로 바꾸어야 한다.

그런데 일단 이렇게 통 이미지로 한 이유가 글자 폰트가 망가져서 그런건데. 

글자만 따로 출력하는 것으로 이 문제를 해결 할 수 있을까?...


일단은 개발 속도를 위해 통 이미지를 그대로 사용하여 페이지를 장식하고 그 뒤에 시간이 남으면 요소들을 잘라보기로 해야겠다.


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

6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02
2. 웹페이지 디자인/기획  (0) 2019.01.01
1.웹 게임 개발 환경을 만드는 법  (0) 2019.01.01

3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기

중단한 프로젝트/WebGameProject(중단)2019. 1. 2. 04:09

준비물

royalslider plugin - 구글에서 검색하시거나, 돈주고 사시면 됩니다.


http://dimsemenov.com/plugins/royal-slider/documentation/

royalslider plugin API가 나와 있는 사이트입니다.


============================================================

1. royalslider plugin을 자신의 웹 프로젝트에 추가합니다.


아마 올바르게 들어가지 않을 수도 있는데 그럴 경우 잘못 압축이 해제된 결과이니 다시 다른걸 다운 받아주세요


2. 예시 코드

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    


    <title>RoyalSlider Example</title>


    <!-- jQuery, 1.7+ is required -->

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->

    <script src="royalslider\jquery.royalslider.min.js"></script>



    <!-- main slider style -->

    <link href="royalslider/royalslider.css" rel="stylesheet">

    <!-- selected skin style -->

    <link href="royalslider\skins\default\rs-default.css" rel="stylesheet">


<script>

    // Slider initialization, you may put this part of code in JS file

    jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            autoPlay: {

                enabled: true

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="content-slider" class="royalSlider contentSlider rsDefault">

      <div>slide1</div>

      <div>slide2</div>

      <div>slide3</div>

    </div>


    


  </body>

</html>


가로로 슬라이드 되는 예시 코드입니다. 이제 이걸 세로로 바꾸면 됩니다.


2. 가로인 슬라이드 코드를 세로로 바꿔보기

어떻게 하는지 찾아보니

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    


    <title>RoyalSlider Example</title>


    <!-- jQuery, 1.7+ is required -->

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->

    <script src="royalslider\jquery.royalslider.min.js"></script>



    <!-- main slider style -->

    <link href="royalslider/royalslider.css" rel="stylesheet">

    <!-- selected skin style -->

    <link href="royalslider\skins\default\rs-default.css" rel="stylesheet">


<script>

    // Slider initialization, you may put this part of code in JS file

    jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            autoPlay: {

                enabled: true

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="content-slider" class="royalSlider contentSlider rsDefault">

      <div>slide1</div>

      <div>slide2</div>

      <div>slide3</div>

    </div>


    


  </body>

</html> 


저렇게 옵션 값을 추가해서 바꾸면 된다고 한답니다.


3. 이제 화면 전체적으로 슬라이드를 할 수 있게 꽉채워 봅시다.

 <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" >


음...아무래도 슬라이드 상으로는 가로 비율만 정의 할 수 있나봅니다. 세로는 비율이 안되고 px 값으로만 되는 듯 합니다.


4. 화살표가 있는게 거슬리네요 건드릴때만 나오도록 숨겨봅시다. 또 자동 전환 속도가 너무 빨라요 변경되는 시간에 8초 정도 걸리도록 해놔야겠네요

  jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            transitionSpeed : 3000,

            autoPlay: {

                enabled: true

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });


5. 자동 전환이 글을 읽는 도중에도 넘어가니 그걸 중지해야합니다. 마우스 커서가 올라가 있으면 자동으로 못 넘기게 합시다. 추가로 항목간 지연 시간을 5초 정도로 늘려줍시다.

  jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            transitionSpeed : 3000,

        

            autoPlay: {

                enabled: true,

                pauseOnHover : true,

                delay : 5000

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });


6. 이제 배경화면을 넣어봅시다.

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

#content-slider .rsThumbs { background: #141e39;}

            #slide_1,

#slide_1 .rsOverflow,

#slide_1 .rsSlide,

#slide_1 .rsVideoFrameHolder,

#slide_1 .rsThumbs { background: #141e39;}

#slide_2,

#slide_2 .rsOverflow,

#slide_2 .rsSlide,

#slide_2 .rsVideoFrameHolder,

#slide_2 .rsThumbs {background: #141e39;}

   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" >

      

      <div>slide1</div>

      <div >slide2</div>

      <div>slide3</div>

      <div>slide4</div>

    </div>

 


각 슬라이드에도 색상을 넣을 수 있는데 그건 비효율 적이니 안하고 slide_1이런거 쓰면 됩니다.

기본적으로 전체 색상을 잡아주기 위하여 content_slider에 색상을 추가했습니다.


7. 이제 테스트로 첫 슬라이랑 두번째 슬라이드 요소들을 채워 넣어봅니다.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    


    <title>RoyalSlider Example</title>


    <!-- jQuery, 1.7+ is required -->

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->

    <script src="royalslider\jquery.royalslider.min.js"></script>



    <!-- main slider style -->

    <link href="royalslider/royalslider.css" rel="stylesheet">

    <!-- selected skin style -->

    <link href="royalslider\skins\default\rs-default.css" rel="stylesheet">


<script>

    // Slider initialization, you may put this part of code in JS file

    jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            transitionSpeed : 3000,

        

            autoPlay: {

                enabled: true,

                pauseOnHover : true,

                delay : 5000

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

#content-slider .rsThumbs { background: #141e39;}

            #slide_1,

#slide_1 .rsOverflow,

#slide_1 .rsSlide,

#slide_1 .rsVideoFrameHolder,

#slide_1 .rsThumbs { background: #141e39;}

#slide_2,

#slide_2 .rsOverflow,

#slide_2 .rsSlide,

#slide_2 .rsVideoFrameHolder,

#slide_2 .rsThumbs {background: #141e39;}

   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" >

      

      <div>

      <img class="rsIgm" src="img\GameIntro_BigName.jpg" alt="" style="width:40%">

      

      </div>

      <div>slide2</div>

      <div>slide3</div>

      <div>slide4</div>

    </div>


    


  </body>

</html> 



글자를 넣으려고하니 좌표를 직접 잡아줘야 해서 굉장히 짜증나네요. 이럴때 슬라이드의 장점을 살려봅시다. 

어차피 한 화면씩 나오니 차라리 포토샵으로 그림이고 뭐고 다 해서 이미지 통째로 올려버리는 거죠 꺄르르르르르


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

5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
2. 웹페이지 디자인/기획  (0) 2019.01.01
1.웹 게임 개발 환경을 만드는 법  (0) 2019.01.01
[개요] Web에서 작동하는 게임을 만들어보자!  (0) 2018.12.31

2. 웹페이지 디자인/기획

중단한 프로젝트/WebGameProject(중단)2019. 1. 1. 22:32

- 목표

1. 웹페이지를 디자인 합시다.

0123


구성

홈페이지

ㄴ게임소개

ㄴ개발자소개

ㄴ게임즐기기 (게임을 실제로 실행)

ㄴQnA 보내기


구성은 4개지만 모든 화면은 1개의 화면에서 이루어 질 수 있도록 합니다.

왼편의 흰색 동그라미를 누르면 해당 구성으로 화면이 수직으로 슬라이드 됩니다.


2. 기능 라이브러리 정의


<화면 슬라이드>

Jquery 라이브러리를 이용한 royal slider를 이용합니다.


<이메일 보내기>

https://brunch.co.kr/@andrewyhc/43 이 분의 HTML 코드를 가져와 사용해 봅니다.


<게임 실행부>

언리얼4 HTML5 빌드를 이용하여 해당 화면을 구성합니다.






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

5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02
1.웹 게임 개발 환경을 만드는 법  (0) 2019.01.01
[개요] Web에서 작동하는 게임을 만들어보자!  (0) 2018.12.31

1.웹 게임 개발 환경을 만드는 법

중단한 프로젝트/WebGameProject(중단)2019. 1. 1. 17:15

- 장비

PC : GTX 1080 , RAM 16gb , i7 8000번대

OS : 윈도우 10 


- 도구

이클립스 : 웹 개발을 위해

아파치/톰켓 : 웹 서버를 퍼블리싱 하기 위해. 아무튼 테스트는 해봐야 하지 않겠습니까.

언리얼4 : 게임을 빌드하기 위해


============================================================

<이클립스 환경 구성>

1. eclipse를 설치합시다.


https://zetawiki.com/wiki/%EC%9C%88%EB%8F%84%EC%9A%B0_%EC%9E%90%EB%B0%94%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD_eclipse_%EC%84%A4%EC%B9%98

위 제타위키에서 설치 방법이 잘 나와 있습니다.


2. EE로 설치합시다. EE버전에 Dynamic Web 프로젝트 만드는 기능이 있어요


<아파치 톰캣 환경 구성>

1. 아파치 톰캣 다운로드를 합시다.

http://withcoding.com/25

이님이 잘 설명 해놨더군요 설치합시다.


2. 이클립스에서 Server로 잡아줍니다.



<Dynamic 프로젝트 생성>

1. 프로젝트 생성에서 Dynamic Web 프로젝트 생성을 해보고 방금 잡은 아파치 톰캣으로 실행을 해봅니다. 


잘 되면 끄읏


<언리얼4 빌드 구성>

1. 언리얼4를 설치합니다.

https://www.unrealengine.com/ko/what-is-unreal-engine-4

다운로드는 언제나 쉽습니다.


2. 프로젝트를 만듭니다.

막 어마어마한거 만들거 아니니 스타트팩 없애주시고, Android를 기반으로 만듭시다.


3. HTML5 빌드를 해봅시다.


한 30분 기다리면 완성됩니다.

예쁘게 빌드가 됩니다. 

이 파일들을 이제 이클립스로 만든 Dynamic Web프로젝트에 넣고 실행을 해보면 되는겁니다!!!


여기서 js만을 가져가서 사용 하고 싶다면 js파일을 떼가시면 되고 

바로 실행해보는 웹 페이지를 보고 싶다면 저기 html파일을 가지고 이용하시면 됩니다.


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

5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02
2. 웹페이지 디자인/기획  (0) 2019.01.01
[개요] Web에서 작동하는 게임을 만들어보자!  (0) 2018.12.31

[개요] Web에서 작동하는 게임을 만들어보자!

중단한 프로젝트/WebGameProject(중단)2018. 12. 31. 10:28
- 왜 Web 게임 프로젝트를 만들려 하는가
  1. 매우 높은 접근성
    1. 크로스 플랫폼 (인터넷 브라우저만 돌아가면 실행 가능하다! 버전에 따라 차이점은 있을 지라도....)
    2. 손 쉬운 게임 환경 구성 (인터넷과 Chrome, Firefox 등만 있다면 실행 가능) 
  2. (학습용)javascript/ 웹 기술을 다양하게 적용 해볼 수 있는 소재이기 때문에
    1. webgl 등의 기술을 적용해 볼 예정이다
    2. Javascript를 이용하여 화면을 구성해 볼 예정이다.
    3. 아파치/톰캣 , Node.js등을 이용하여 웹 어플리케이션 서버를 구성해 볼 예정이다.
    4. DB 적용을 위하여 Node부류 DB를 이용 해볼 계획이다.
  3. (학습용)기존의 엔진의 HTML5 적용 가능성을 확인 하기 위해
    1. 언리얼 4 또는 유니티 5를 이용하여 HTML5의 게임을 만들 수 있는지 확인 할 예정이다.
    2. 어디까지 표현이 가능한지 확인해 볼 예정이다. (WebGL1, WebGL2의 경우를 놓고 확인 해볼 예정)
  4. (학습용)웹 서버를 이용하여 대량의 접속을 어떻게 처리 할 것인지 알아보기 위해
    1. 다른 목표로는 다중 인원 접속 처리를 행하기 비교적 어렵다
- 목표
Web에서 작동되는 게임을 구동 할 수 있는 Web을 만들어 보자.

- 구체적 목표의 상상도
<게임 메인 화면>

(사진) 완성 예시 모습

웹 사이트에서 구동되는 게임이 전면에 나오고 상호 작용을 할 수 있는 버튼 들이 있는 모습과 마우스와 키보드를 이용하여 게임을 진행 할 수 있는 결과가 주 목표이다.


<게임 소개 화면>

(사진) 게임 소개용 화면 - 엘x드 게임

자바스크립트를 이용하여 동적인 화면을 구성하고 사용자 반응적인 웹 사이트를 만드는 것이 주요한 목적 사용자 반응적인 웹 사이트란, 사용자가 스마트폰에서 볼 경우 그  화면에 맞추어 웹이 출력되는 것이고 pc에서 볼 경우 그 화면에 맞추어 보여지는 사이트, 말하자면 하나의 코드로 2개 이상의 화면에 적용이 가능한 범용적인 웹 페이지를 만드는 것


- 개발 예정 기능
  1. 게임
    1. 이동 기능
    2. 오브젝트 상호작용 기능
    3. 멀티플레이 기능
    4. 채팅 기능
  2. 웹 사이트
    1. 메인 게임 출력용 화면
      1. 버튼을 이용한 상호작용
      2. 회원가입 처리
    2. 게임 소개용 화면
      1. 버튼을 이용한 화면 전환
      2. 백그라운드 동영상 출력

- 개발 순서
  1. 웹 어플리케이션 서버 환경 구성
  2. 웹 페이지
    1. 메인 웹 게임 페이지
    2. 게임 소개 페이지
  3. 게임
    1. 이동기능
    2. 오브젝트 상호작용 기능
    3. 멀티플레이 기능
    4. 채팅 기능

웹서버란 무엇인가.docx












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

5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02
2. 웹페이지 디자인/기획  (0) 2019.01.01
1.웹 게임 개발 환경을 만드는 법  (0) 2019.01.01

티스토리툴바