2Bbear's knowledge workshop

10. 화면에 안나오는 이유, 그 타협점. 프로젝트의 정리

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

1. Coin c++ 클래스 코드를 넣는 것만으로 오류가 발생한다.

- 주된 문제는 C++코드를 JavaScript로 변환하는 과정에서 문제가 생기는 것 같다.

- C++코드를 자바스크립트로 바꾸고 이것을 실행하려고 하면 올바르게 변환되지 않아 실행시 오류가 발생하는 것 같다.


해결 방법 :

C++ 코드로 작성하는 것이 아니라 블루프린트를 이용하여 작성하는 것으로 이러한 문제를 해결하였다. 왜 이렇게 되는지 생각해보면 작성된 C++코드가 올바른 정규 코드가 아니여서 발생하는 문제인 것 같다.



2. 다른 스크립트 코드와 함께 언리얼 js를 호출하면 실행이 안되는 오류

-  확인 안되는 오류지만 먼저 다른 스크립트와 충돌나서 실행이 안되는 걸 수도 있고

-  커져버린 level의 instance 메모리 크기로 인해 간신히 아슬아슬하게 실행 되던 부분을 다른 스크립트들이 메모리를 먹어서 그냥 최대 수용 가능한 메모리를 넘어버린 문제 일 수도 있다.


해결 방법:

못찾음 그냥 기본 level에 있는 걸 들고 오면 잘 실행되길래 ...아무튼 뭔가 기본 level에 넣으려고 하면 터지는거임.




결론 :

UE4로 웹 게임을 개발하는 것은 문제가 많은 것 같다. 아직 이쪽 빌드는 테스트형태로 제대로 된 업데이트가 이루어지지 않은 문제도 있다.


그럼에도 이번 프로젝트로 HTML로 화면을 어떻게 구성해야 하는지 알 수 있었다.

또 Web 게임의 경우 쓰면 안되는 C++ 코드도 알 수 있었다.

destroy(this) 라던지...



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

평가 : 

프로젝트 난이도 - 중

결과 - 하(기대한 게임도 못올렸다.)


얻은 것 - 어떻게 HTML을 꾸미는 지 알 수 있었다.

잃은 것 - 시간.....

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

9. 트러블....트러블....언리얼로 HTML을 만든다는 것은 무리인가.  (0) 2019.01.07
8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편  (2) 2019.01.07
7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02

9. 트러블....트러블....언리얼로 HTML을 만든다는 것은 무리인가.

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

열씸히 만들긴 했지만 오늘 문득 HTML5 빌드를 해보니 실행이 안된다...

이럴 거 같았어...메모리 문제 때문에 실행이 안될 것 같았단 말이야....흙흙...



문제

1. HTML에서 감당하기에는 너무 많은 메모리를 사용하려 해서 게임이 실행 되질 않음....

...

해결 방법이 있을까....

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

10. 화면에 안나오는 이유, 그 타협점. 프로젝트의 정리  (0) 2019.01.07
8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편  (2) 2019.01.07
7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02

8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편

중단한 프로젝트/WebGameProject(중단)2019. 1. 7. 00:00

만들어야 할 것

- Intro 화면

- InGame 화면

- Ending 화면



1. Intro 화면


간단히 로고 영상을 출력 후 바로 Ingame Level로 전환할 것이다.


참고 : https://youtu.be/uEO_nLnytp0


After effect 2019로 간단히 만든 로고 영상


이제 로고 영상을 Ue4 Intro Level에서 UI로 출력 시키면 된다.


먼저 만들어진 영상을 넣기 위해 



file medi source 를 만들어준다.



이후 만들어진 file media source의 이름은 Ms_Intro2로 하고 이 아이콘을 더블 클릭하면 이런 창이 드는데 여기서 File Path부분을 누르고 방금 만든 logo 영상을 넣어주면 된다.



이후 Media Player를 생성하고



생성 할때 이런 창이 뜨는데 위 사진 처럼 체크 박스에 체크 한 뒤 ok를 누르면 된다.


이후 이름을 설정하면 사진 처럼 아이콘이 2개가 생긴다.


이제 이 영상을 그림으로 보여줄 텍스처를 만듭니다.



마테리얼의 내부 블루프린트는


위 사진의 details를 따라서 해주시고


Texture Sample로는 방금 만들어진 MP_Intro2_Video를 드래그엔 드롭 후 연결을 해줍니다.


이제 Level blueprint를 Open합니다.



그후 내부 블루프린트를 아래의 사진과 같이 해줍니다.



NextLevelName의 타입은 Name이고 기본 값으로 다음 Level의 이름을 갖고 있습니다.




이렇게 인트로 화면이 만들어 졌습니다.



참고 :

https://www.youtube.com/watch?v=7OEbO353_GM 

UE4 Media Player to Render a Media Texture

https://www.youtube.com/watch?v=LwEu2PqqCIo

Unreal Engine 4 HUD: Widget Blueprint Tutorial



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

10. 화면에 안나오는 이유, 그 타협점. 프로젝트의 정리  (0) 2019.01.07
9. 트러블....트러블....언리얼로 HTML을 만든다는 것은 무리인가.  (0) 2019.01.07
7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02

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

티스토리툴바