Красивое меню для игры

В этой статье мы повторим все ранее полученные навыки (надеюсь, вы прочитали все мои статьи?) и разработаем специальную форму, которая подойдет для меню в игре. Мы будем использовать фоновый рисунок, стили, собственные шрифты. Будет очень красиво!

Обычно, при запуске игрушки пользователь сначала видит экран с различными настройками. Необходимо подготовить его перед погружением в игру. Поэтому первое впечатление очень важно. Скучные стандартные кнопки с скучными стандартными шрифтами вряд ли будут хорошим решением. Поэтому поступим следующим образом. Воспользуемся макетом RelativeLayout и набросаем на нем элементы следующим образом (картинку для фона подготовим и сохраним в папке /drawable).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/backgroundmenu" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_margin="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/start"
            style="@style/MenuFont"
            android:layout_gravity="right"
            android:text="@string/menu_start_game" />

        <TextView
            android:id="@+id/quick"
            style="@style/MenuFont"
            android:text="@string/menu_quick_game" />

        <TextView
            android:id="@+id/settings"
            style="@style/MenuFont"
            android:text="@string/menu_settings_game" />

        <TextView
            android:id="@+id/about"
            style="@style/MenuFont"
            android:text="@string/menu_about" />

        <TextView
            android:id="@+id/exit"
            style="@style/ExitFont"
            android:text="@string/menu_exit" />
    </LinearLayout>

</RelativeLayout>

Посмотрим на промежуточный результат

Особо обратите внимание, что для текстовых меток мы обращаемся к стилям MenuFont, а для метки Exit к стилю ExitFont, которые определены в файле styles.xml. Подробнее о стилях читаем здесь.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MenuFont">
        <item name="android:textSize">25sp</item>
        <item name="android:textColor">#FFFFFF00</item>
        <item name="android:textStyle">bold</item>
        <item name="android:clickable">true</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">right|center</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="ExitFont">
        <item name="android:textSize">25sp</item>
        <item name="android:textColor">#FFFF6a17</item>
        <item name="android:textStyle">bold</item>
        <item name="android:clickable">true</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">right|center</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

</resources>

Свои шрифты

Теперь изменим шрифты. Я уже описывал, как использовать собственные шрифты. Если коротко - в папке /assets сохраняем нужный файл шрифтов и вызываем его из кода через TypeFace.

final TextView textStartGame = (TextView)findViewById(R.id.start);

textStartGame.setTypeface(Typeface.createFromAsset(
    getAssets(), "fonts/tusch_touch_3_regular.ttf"));

Запустив проект, мы увидим следующее:

Неплохо получилось. Не забудем про локализацию. Создадим папку /res/values-ru и скопируем в него файл strings.xml. Отредактируем файл по своему вкусу. Запускаем снова.

Теперь не только британская голубая кошка, но и наша русская голубая сможет поиграться с рыжим котом.

Сохранение настроек

Для сохранения настроек (пункт меню Настройки) воспользуемся SharedPreferences (перечитываем статью Сохранение настроек). Ниже представлен отрывок из кода.

private void getSettings() {
	SharedPreferences settings = getSharedPreferences(GameMenuDemoActivity.PREFS_NAME, 0);
	
	settingsHolder[0] = settings.getBoolean("sound", true);
	settingsHolder[1] = settings.getBoolean("music", true);
	settingsHolder[2] = settings.getBoolean("vibrate", true);
	settingsHolder[3] = settings.getBoolean("graphics", true);			
}

@Override
public void onClick(View v) {
	SharedPreferences settings = getSharedPreferences(GameMenuDemoActivity.PREFS_NAME, 0);
    SharedPreferences.Editor editor = settings.edit();
      
	switch(v.getId()){
		case R.id.sound:
			editor.putBoolean("sound", !settingsHolder[0]);
			break;
		case R.id.music:
			editor.putBoolean("music", !settingsHolder[1]);
			break;
		case R.id.vibrate:
			editor.putBoolean("vibrate", !settingsHolder[2]);
			break;
		case R.id.graphics:
			editor.putBoolean("graphics", !settingsHolder[3]);
			break;
		case R.id.back:
			finish();
			break;
	}

Теперь при нажатии на надписи Настройки мы попадаем на другой экран приложения, где можно выбрать нужные настройки для игры (звук, музыка, вибрация, графика). Настройки запоминаются и сохраняются.

Вот в принципе и все. Играйте на здоровье!

Реклама