지금 제글을 복사해서 이곳에도 올리는게 바람직한지 모르겠지만

한분이라도 보셨으면 해서 올려봅니다.


11개월 전, 저는 코딩에 관해서 모르는 전자전기 학생이었습니다.

"게임"이라는 학문에 관심이 가게 되었고 현재도 공부중인 초보 개발자 입니다.

두서없이 의식의 흐름속에서 흘러져 내려가는 내용이기 때문에 보시기 힘들 수도 있지만

게임을 만들때 "중요한"(?) 내용들을 다뤄보고자 합니다.


전체 내용은 계속 이어져 내려가 하나의 프로젝트를 완성하게 될겁니다.

음... 완성된 프로젝트를 처음부터 써내려 가는게 두렵지만 한 번 해 보겠습니다.


힘들었을 때 봤던 인터넷상의 알지 못하는 코딩을 보면서 공부를 했습니다.

저도 그들처럼 초보자분들의 프로그래밍의 진입장벽을 낮춰보고자 글을 써봅니다.


-----------------------------------------------------------------------------------------------------------


< 게임의 목표 >


Splash화면을 이용한 처음 화면의 모습(처음 어플을 켰을 때)을 꾸미기

가상 joystick을 활용한 움직임 제어

플레이어의 활동범위 제어

적들의 움직임 패턴

스레드

및 여러가지 소소한 내용들을 전해볼까(?) 합니다.


-------------------------------------------------------------------------------------------------------------


왜(?)인지 모르겠지만 Splash라는 의미가 화면의 전환을 의미하며 안드로이드 앱을 만드는 사람들 사이에서는

앱을 켰을 때 첫 화면을 의미하는 것처럼 보입니다.


그.래.서


Splash화면을 만들어 보고자 합니다.

(남의 소소크드를 참고해서 만들었습니다.)


초보때는 안드로이드를 까는 것부터 시작해서 drawable에 이미지 넣는것 manifest.xml에 액티비티 넣는 것

build.app에서 무엇을 하는지 모르는 경우가 있기 때문에 상세하게 진행 하겠습니다.


----------------------------------------------------------------------------------------------------------


처음 화면이 시작되면 start New project를 하시고

Application name을 적어주시고

넘어가지 마십시오.

Company Domain에서 "example"을 원하시는 영어(대부분 소속명이나 회사명을 사용합니다.)로 바꿔주십시오.


(나중에 알게 되시겠지만 Compnay Domain영역에서 user.example.xxx불라불라 형식으로 되어있으면

앱 출시를 할때 apk파일을 업로드 하지 못해서 firebase를 활용한 admob이라던지 여러가지 부분들을

고쳐야 하기 때문에 시작에서 부터 고치고 시작하는게 좋아 보입니다.) 


next를 눌러주시고

다른건 건드리실 필요가 없고 Minimum SDK를 저는 4.1 JellyBean으로 선택했습니다.

(SDK를 바꿔주셔도 되지만 저는 그냥 JellyBean을 했습니다. 아무것도 몰랐을 때 초창기에 제가 다운 받은게 이거라 이걸 선택했습니다.)

next누르시고 Empty Activity를 누르시고 Activity name과 layout name을 default되어진

이름(MainActivity activity_main)그대로 납두시고 Finish를 눌러주세요.


--------------------------------------------------------------------------------------------------------


이제 res -> layout -> 오른쪽 버튼을 누르시고 layout resources를 추가하십시오.

첫번째는 fade_in입니다.


fade_in은 Alpha값을 1초동안 증가시키는 애니메이션을 포함한 layout 입니다.

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:interpolator = "@android:anim/accelerate_decelerate_interpolator" //인터넷에 찾아보면 나옵니다.
android:fromAlpha = "0.0"
android:toAlpha = "1.0"
android:duration="1000">
</alpha>

이렇게 작성해 주십시오.


두번째로 fade_out layout을 만드신 다음.

fade_out은

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:interpolator = "@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha = "1.0"
android:toAlpha = "0.0"
android:duration="1000">

</alpha>
요렇습니다. 이건 반대로 Alpha값이 줄어드는 애니메이션 이네요.

그리고 splash layout을 만드신 다음
<pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:scaleType="center"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:background="@color/bbk"
>
<ImageView
android:layout_marginLeft="142dp"
android:layout_marginTop ="320dp"
android:layout_width="90dp"
android:layout_height="90dp"
android:src = "@drawable/mark2"/> //drawable 폴더안에 mark2라는 이름의 이미지가 있어야합니다.

<ImageView
android:layout_marginLeft="86dp"
android:layout_marginTop ="150dp"
android:layout_gravity="center_vertical"
android:layout_width="200dp"
android:layout_height="200dp"
android:src = "@drawable/mark"/> //drawable 폴더안에 mark라는 이름의 이미지가 있어야합니다.


</RelativeLayout></pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">이 내용을 추가해 주십시오.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);"><RelativeLayout>이 뭘까 하시는 분들이 있으실 겁니다. RelativeLayout는 개발자의 입맛대로 위치를 지정할 수 있습니다.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">그래서 자유로워 지지만 그만큼 코딩을 할때 신중해야 합니다. 왜냐하면 자유로운 대신 정확한 위치를 보기 위해서는 </pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">빌드를 해봐야 되게 때문입니다.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">그리고 "dp"라고 숫자 뒤에 적힌 부분이 있습니다. dp는 pixel과 상관없이(?) 스마트폰 기기에 적용되는 단위입니다.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">예를 들면 스마트폰 크기가 크면 이미지도 dp에의해서 커지게 되고 스마트폰 크기가 작으면 dp에 의해서 이미지가 작아집니다.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">이걸 줄이면 해상도에 따라서 가변적으로 변하는 값이 dp입니다.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">
</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">-----------------------------------------------------------------------------------------------------------------------</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">
</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">java 밑에 com.xxx.xxx라고 되어있는 세가지 폴더중에서 맨 위에 오른쪽 버튼 하시고 java class하나를 생성하십시오</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">이름은 SplashActivity로 저는 했습니다.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">코드는 다음과 같습니다.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">public class SplashActivity extends AppCompatActivity{ </pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">
//onCreate는 액티비티가 활성화 될시에 맨 처음 하는 작업입니다. 

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.splash); //위에서 작성한 splash화면을 적용됩니다.
initialize(); //splash화면에서 alpha값이 증가하고 감소하는 걸 통해서 화면이 검어지다 밝아집니다.
}

private void initialize() {

Handler handler = new Handler() //메시지를 전달하는 함수입니다. 핸들러를 통해서 화면이 검어지다 밝아지는 걸 메시지 큐에 저장합니다.
{
@Override
public void handleMessage(Message msg)
{
finish();

overridePendingTransition(R.layout.fadein, R.layout.fadeout); //layout이 fade_in에서 fade_out으로 변합니다.
}
};
handler.sendEmptyMessageDelayed(0, 2000); //2초간 화면이 검어지다 밝아집니다.

}
}
</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">
</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">----------------------------------------------------------------------------------------------------------------</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">res -> values -> styles.xml에서 이렇게 해줍니다.</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> //action bar는 상단에 있는 바인데 보기 이상해서
<!-- Customize your theme here. --> //없애줍니다
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar"> //요건 추가해줍니다. 이것도 상단에 있는 바를 없애줍니다.
<item name="android:windowBackground">@drawable/blackback</item>
</style>
</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">----------------------------------------------------------------------------------------------------------------------</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">App -> manifest -> AndroidManifest.xml에 들어가신 다음에</pre><pre style="color: rgb(0, 0, 0); font-family: '굴림체'; font-size: 9pt; background-color: rgb(255, 255, 255);">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:largeHeap="true"
android:supportsRtl="true"
android:theme="@style/SplashTheme"> //요부분을 위에서 작성한 것처럼 적용시켜주시고

<!-- splash activity -->
////////////////////////////////////////////////////////////////////////
<activity
android:name="com.firstreport.user.DotDream.SplashActivity"
android:screenOrientation="portrait" />

//얘가 자동으로 추가가 안되어있을수 있으니 추가해줍니다.
//screenOrientation="portrait"는 스마트폰에서 화면이 가로로 기울여질때에도 세로로 고정킨다는
//의미입니다.
////////////////////////////////////////////////////////////////////////

<activity
android:name="com.firstreport.user.DotDream.MainActivity"
android:screenOrientation="portrait"> //얘도 portrait를 해줍니다.
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>

전체소스를 공개하면 어지러워서 이 부분은 보여드려야 할 부분과 추가할 부분만
적었습니다.

/////////////////////////////////////////////////////////////////////////////////////////////////
그리고 대망의 맨 처음에 만들었던 activity_main.xml의 소스 코드입니다.
그대로 갖다 붙이시면 안 될수 있으니 잘 보면서 붙이셔야 합니다.!!!!
</pre>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF" //background를 흰색으로 하겠다는 의미입니다.
android:gravity="center" //가운데로 정렬!
android:orientation="vertical" //수직으로 정렬!
tools:context="com.firstreport.user.DotDream.MainActivity">
//사실 이 코드에서는 별로 의미는 없지만 TableLayout을 적용하면 짜임새 있게 화면을 정리할 수 있습니다.
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TableRow android:gravity="center_vertical">

<TextView
android:id="@+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Avoid"
android:textSize="50dp" />

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src=""@drawable/enemy" /> //drawable폴더안에 enemy라는 이미지가 있어야합니다.


</TableRow>

</TableLayout>

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="70dp"
android:paddingLeft="1dp"
android:src=""@drawable/player" /> //drawable안에 player라는 이미지가 있어야합니다.

<Button
android:text="Start"
android:background = "@android:color/holo_blue_light" //버튼의 색상입니다.
android:textColor="#FFFFFF"//흰색 표시입니다.
android:layout_marginTop="70dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
android:id="@+id/button1" />


</LinearLayout>
궁금하시면 LinearLayout과 RelativeLayout의 차이를 인터넷에 검색해 보시는 것도 좋아보입니다.
textSize를 sp가 아니라 dp로 사용한 이유는 어르신분들이 글자 크기를 크게하기 위해서
스마트폰의 글자를 크게 하시는 경우가 있는데 이때 sp를 사용할 경우 글자크기가 깨지는 경우가 발생해서
dp로 조정했습니다.!! 근데 안드로이드에서는 sp를 권장한다는 사실을 아셔야합니다!!!
-------------------------------------------------------------------------------------------------------------
다오셨습니다. 대망의 MainActivity의 소스코드입니다.
public class MainActivity extends AppCompatActivity{

@Override
protected void onCreate(Bundle savedInstanceState) {

startActivity(new Intent(this, SplashActivity.class)); //activity_main layout이 보여지기 전에 splash화면을 띄웁니다
//start시작해라! activity를. Intent시키는데 여기에다. SplashActivity.class를 실행시켜라!라는 직역입니다.ㅋㅋㅋ

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//TextView main_first = null;
//setFont(main_first, "fonts/korra.ttf", R.id.test);
//setFont(main_first, "fonts/korra.ttf", R.id.button1);

Button button = (Button)findViewById(R.id.button1);

button.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {

Intent intent = new Intent(getApplicationContext(), game.class);
startActivity(intent);
}
});

}
/*
void setFont(TextView name, String path, int res)
{
name = (TextView)findViewById(res);
Typeface font = Typeface.createFromAsset(this.getAssets(), path);

name.setTypeface(font);
}
*/
}

-------------------------------------------------------------------------------------------------

끝입니다. 이렇게하시면 처음 앱이 시작했을때 화면을 만들 수 있습니다.

저같은 경우엔 로고를 박아서 로고가 등장한다음 화면이 검어졌다 밝아집니다.

여기까지 첫번째 Splash에 관한 내용이었습니다.

두서없이 쓰여진 내용이라 강좌에 적합할지 모르겠지만 누군가는 예전의저(?)라고 표현하기엔 그렇지만
그런 분들을 위해서 글을 남겨봅니다.