スマホ版ソーシャルゲームコーディングのポイント

スマホ版ソーシャルゲームコーディングのポイント

  • このエントリーをはてなブックマークに追加

三度の飯よりコーディングが好きと言って入社させてもらった マークアップエンジニアのココエです。
四度目は飯の方がいいです。

さて、自分の所属事業部がソーシャルアプリ事業部なので、 ソーシャルゲームのコーディングばっかりやっています。

最近は、どんどんスマートフォンが普及してきて、 ソーシャルゲームもスマートフォンのコーディングが多くなってきました。

なので、
「スマホ版ソーシャルゲームコーディングのポイント!」 について書いてみようと思います。

・・・といっても、ポイントがいっぱいあるので、 今回は大事なポイント2点のみでw

  1. 容量に気を付けて、表示スピードを重視する
  2. ページの内容は、可変することが前提!

容量に気を付けて、表示スピードを重視する

まんまですが、ユーザーは動きが遅かったり重かったりを嫌うので、ここは一番気を付けたいところです。

容量を軽くする、見直しポイントとしては

  • PNG24(透過PNG)は、透過の情報が結構重いので使いどころを考えて使う。
  • Retina対応は、画像の容量を考慮して、どこまで対応するか切り分けする。

表示スピードを見直すポイントとしては

  • CSS3のシャドウは、あまり広範囲に利用しない(iPhoneは気にならなくとも、Androidは描画が遅くなる。)
  • jQueryのanimationは重いので、CSS3で対応するとよい感じ。
  • 画像はCSS Sprite推奨。特にナビゲーションなど共通で使うもの。

といった感じでしょうか?

続きを読む

ページの内容は、可変することが前提!

これ結構重要です。

LPや、数ページのコーディングの経験が多かった方に、ぜひ見ていただければと思います。

とりあえず、例がないと説明しにくいので、サンプルページを用意しました。
ソーシャルゲームによくある「ショップ」のページです。

デザインのことは突っ込んではいけません、当方コーダーです。(と、逃げるww)

では、可変するということを中心に、ポイントをみていきましょう。
※HTMLのバージョンはHTML5ということで。

1点目

所持している「ゲーム内通貨」と「リアルマネー」が表示してあるエリアで、 (まあ、あまりないケースですが)所持コインが0の場合に、コインエリアを消したい、といった場合。

仕様を理解しないでコーディングすると、上記の「悪い例」に書いてあるようなことになります。

2点目

このケースは、「期間限定デコ」の見出し要素に対してbackgroundなどで赤いラインを表示するよう設定してしまうと、期間限定デコが消えたときに「あれ!?赤いラインがでてない!」といったことになります。

この場合は、フェスGやコインの表示エリアに対して、赤いラインを設定するのがよいと思われます。
※もし、フェスGやコインの表示エリアがなくなったとしても、赤いラインが二重に表示されないですむし!

3点目

ボタンの要素自体にmarginをかけて、テキストにmarginを設定し忘れていると、期待通りのレイアウトが実現されなかったりするので、ボタンやテキストの親要素に対してmarginやpaddingをかけるのも手かな、と思います。

CSS

<style>
.mtb10 { margin-top:10px; margin-bottom:10px; }
.txtRight{ text-align:right; }
</style>

HTML(PHP)

<div class="mtb10 txtRight">
<?php if($hasCoin): //コインが足りている場合 ?>
<a href="/" class="btn1">買う</a>
<?php else: //コインが足りない ?>
<span>コインが足りません</span>
<?php endif; ?>
</div>

4点目

スマホ版のソーシャルゲームのコーディングでは、行全体をタップエリアにすることが多く、このような例は多くみられると思います。

リンクがある時と無い時で、いちいちclassをつけたり外したり等で切り替えるのは冗長かな?と思います。
そんな時に役に立つのがネガティブマージンです。

CSS

※説明ポイントのみの記述です。

<style>
.itemArea{
    padding:10px;
}
.itemArea > .blockLink{
    margin:-10px;
    padding:10px;
}
.itemArea > .blockLink.arrow{
    padding-right:20px; /* 20pxはカーソル分を考慮した余白 */
}
.blockLink.arrow{
    position:relative;
}
.blockLink.arrow:after{
    content:"";
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    right:5px;
    top:50%;/* 縦に対してセンタリング処理 */
    margin-top:-5px;/* 縦に対してセンタリング処理 */
    background:url("/") no-repeat;
}
</style>

HTML:リンク無しバージョン

<div class="itemArea">
    <p><img src="/" width="65" height="65" alt="画像"></p>
    <div class="rightColumn">
        <p>ソ・ニフェスさん(2)</p>
        <dl>
            <dt>価格:</dt>
            <dd>10フェスG</dd>
        </dl>
        <p>かぁいいねぇ~ニフェス</p>
        <div class="txtRight">
            <p>準備中</p>
        </div>
    <!-- /.rightColumn --></div>
<!-- /.itemArea --></div>

HTML:リンク有りバージョン

<div class="itemArea">
    <a href="/" class="blockLink arrow">
        <p><img src="/" width="65" height="65" alt="画像"></p>
        <div class="rightColumn">
            <p>ソ・ニフェスさん(2)</p>
            <dl>
                <dt>価格:</dt>
                <dd>10フェスG</dd>
            </dl>
            <p>かぁいいねぇ~ニフェス</p>
            <div class="txtRight">
                <p>準備中</p>
            </div>
        <!-- /.rightColumn --></div>
    <!-- /.blockLink --></a>
<!-- /.itemArea --></div>

.itemAreaでpadding:10pxを指定。普通に意図した余白が保たれます。

次に、.itemAreaの直下にa要素(.blockLink)が来た場合。
ここで、親要素(.itemArea)で設定したpadding:10pxを、元に戻す処理margin:-10px;を設定。
さらに、同じようにpadding:10px(親要素.itemAreaと同じ余白)を設定することにより、リンクがあろうがなかろうが、見え方が同じになり、リンクエリアもちゃんと保持されます。

と、こんな感じでしょうか。

まとめると、ちゃんと仕様を理解してコーディングしないと、システム実装後にレイアウト崩れちゃうよん。ってことですね。

こんな色んなことを考えながらコーディングをするわけですが、ただいまスタッフを募集中です。一緒に働いてよねっ!

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

kokoe(フロントエンドエンジニア)

ソーシャルゲームのコーディングやってます。三度の飯よりコーディングが好きと言って入社させてもらった エンジニアのココエです。四度目は飯の方がいいです。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation