脱出系も作ってみたい

とうとう100機!

最後の空母級「神型」のデータが完成しました。最初は神型のクラスは「私がクリアできない」レベルの難易度にしようと考えていたのですが、結局私でもクリアできる難易度になっています。

 

攻略動画の追加

googleで「弾幕の器」を検索したら、Lineの質問で「村雨が攻略できない」という記事があったので駆逐艦「村雨」の攻略動画をアップしました。
→参考:youtube「村雨の攻略」
 

スマホゲームの感想

前回の記事で紹介した「5年後の世界で彼女の笑顔を思い出す」をクリアしました。ハッピーエンドの方に辿り着いたのですが少しモヤモヤします。もし自分のせいで誰かを5年間も昏睡状態にさせてしまったとして、5年ぶりの再会でああいう態度をとるのか?
でも、これ系のゲームって技術的な敷居が低いから、今後は良いシナリオのコンテンツが多く出てきそうな気もします。
 

細切れのゲームがあっているみたい

この記事を読んでDoorsを遊んでみました。以前挑戦したcubic roomが1つの脱出だったのに対しDoorsは100のシンプルな脱出があります。両方面白いのですが、自分には細かく区切られたDoorsの方があっているかもしれません。
 
Doorsの記事には具体的な収益は書いてないのですが、DL数と1DLあたりの収益が記載されているので大まかな収益が計算できるのですがビックリ。
—————————————————
・Doors:DL数:23,700,000 x 5円 = 約1億2千万円
・上記以外のDoors以外のシリーズ累計:7,730.000 x 5円 = 約4千万円
—————————————————
前回の記事で「放置系を作ってみたい」といいましたが、脱出系も作ってみたくなりました。
 
 
 

cocos2d-xの本を買ってみた

ゲームが作りたい

クイズやパズルなど動きが少ないものはjQueryでも作成できるのですが、もっとアクション性
のあるゲームを作ってみたくなりました。
ゲーム作成用のフレームワークはUnity(3Dゲーム)とcocos2d(2Dゲーム)が有名なのよう
ですが、私が作成したいのは2Dゲームなのでcocos2dを学ぼうと思います。
ということで以下の2冊をアマゾンにて購入。
cocos
→AMAZONリンク:cocos2d-xによるiPhone/Androidアプリプログラミングガイド
→AMAZONリンク:cocos2d-x入門
なんだかAMAZONレビューが微妙な感じなのですが、AMAZONの内容紹介が丁寧だったので
何となく購入。まだ1ページも読んでいません。
現在はjQueryでウノっぽいゲームを作っているので、それが完成してからcocos2dの勉強を
始めたいと思います。
 
 

7ならべ占い

先週、アプリの申請をした「七並べ占い」が無事審査を通りました。下の画像をクリック
するとアプリの説明ページが開きます。
スクリーンショット 2014-07-13 0.43.37
 
しかしながら面白くありません…。実は占いのモチーフをUNOにしようと考えていたのです
が、UNOはルールが7ならべよりも複雑で思考ルーチンが大変なため、以前作成したことの
ある7ならべに日和ってしまったのです。
カードのデザインがUNOっぽいのは、そういう経緯があったからです。
 
あと以前の記事で、ドロップシャドーをかけると画像が歪むと書きましたが
cssのfilterではなくbox-shadowにしたら治りました。box-shadowでは透明pngの
形ではなく矩形にしかエフェクトがかからないのですが…。
よく見ると角丸の部分にエフェクトがかかっていないことが確認できます。
 
 

でもUNOもできたよ

しかし「7ならべ」は面白くないし、逃げていては技術も習得できないのでUNOっぽいゲーム
も作成します。というかゲームの流れは概ね完成しました。
でもって、テストプレイをしながら思ったわけです。UNOって友達とワイワイ楽しむから
面白いのであって、コンピュータ相手に遊んでも、ちっとも面白くないと…。
 
ということで、cocos2dで良くあるスマホゲーム(カジュアルゲームというジャンル
らしい)を作りたいなと、思ったわけです。
 
 
 

スマホゲーム:にゃんこ大戦争

前回の記事で2048の運任せの部分を減少させると書きましたが、その方法は
ログインボーナスで「毎日少しずつゲームが有利」になる仕組みにする予定です。
 

既存のゲームから学ぶ

iOSアプリ作成の勉強を始めた去年の夏くらいから、いろいろとスマホゲームを
ダウンロードしてきたのですが、その中でも一番長く続けているのが
にゃんこ大戦争です。
 
このアプリを長く続けている理由は毎日ログインボーナスが貰えるからです。
無課金でも、毎日続けることでゲームが有利になるのです。
写真
ということで、現在作成している2048をアレンジしたゲームにもログインを続けることで
ゲームを有利にしていきます。
 

収集欲をかき立てる

2048の亜種にはパネルに絵柄を利用したものがありますが、私の知る限り絵柄は適当な
チョイスで連続性がありません。例えば「2048-doge ver」ですが、絵柄からパネルの
得点を想像することはできません。やはり得点の多いパネルほどレア感が欲しいと思うのです。
なので、現在作成しているアプリではパネルに進化的な連続性を付けて、得点が上がる
ごとにレア感が増すようなデザインにする予定です。
あとクッキークリッカーのAchievementsのような達成目標のようなのも付ける予定です。
 

課金したけど

スマホゲームをよく知るために課金もしたのですが、自分には合わないなと感じる
事が多いです。課金してもあまり有利な展開にならず、あまりメリットを感じられません。
しかも、キャラがダブることも多く悲しいです。以下の画面にある
「双剣ネコ魔剣士」は3回ダブって、左隣の「ネコラマンサー」は2回出ています。
写真
 
でもって、このアプリは色々なタイミングで課金しなくてもレアガチャを引けるのですが
無課金でも以下の様なゲームに役立つ「激レアキャラ」を引き当てることがあります。
写真2
課金した時にキャラが沢山ダブって、無課金の時に激レアとか出るというタイミングの
問題もあり、課金は(私には)合わないなぁと感じてしまったわけです…。
 

招待コード

あと、このゲームは福岡県をクリアすると「招待コード」を入力でき
招待する側もされる側もプレゼントが貰えます。
ということで、最後に私の招待コードを貼っておきます。
もしよかったら使ってください。
——————————————-
kcegmo0
——————————————-
 
 
 

web shocker : css3の3D Transforms


制作会社のiPhone向けサイト。画面の切り替え演出に力が入っています。
worksのページ切り替えでは左右へのスライドアニメーション。そして各事例に
移動するときはcss3の3D Transformsを利用したフリップの演出。
※pcでもsafariやchromeで閲覧可能です。
 
参考サイト:くるくるフリップを CSS 3 で作る実験
 
 
 

jQuery:オリジナルのフリック

flipsnap.jsや13_flicksimple.jsは簡単に利用できるのでオリジナルのコードを
組むつもりはないのですが、以前Android(IS11T)を購入した際に機能しなかった
オリジナルのフリックをデバッグしました。
以前の記事:iOS+jQuery:部分横スクロール(3)androidでの検証
 
原因はタップ位置を取得するコードにありました。以前のコードは以下の様に
タップ位置を取得していたのですが、この方法ではスマートフォンでのタップ位置は
取得できません。というか何故iOSだと機能するのかが不思議です。下記のように
書き換えたら、iOSでもAndroidでも正常に機能するようになりました。

click_X = eo.pageX;

スマートフォンではマルチタッチに対応しているため、どのタッチポイントの座標かを
指定する必要があり、以下の様に書かなければならないのです。

click_X = eo.touches[0].pageX;
デバッグ済サンプル
サンプル:20_original.html
※PCでは動作確認できません、jQueryのソースはhtmlに書いてあります。

 
おしまい
 
 
 

スマートフォン:flipsnap(5)

バグ取りには時間がかかります…。
前回の最後で紹介した画像がずれるバグですが、結果から言うとcssで簡単に対処できました。
※デバッグしやすいように一定時間でページが切り替わる処理は外しています。

デバッグ用サンプル
サンプル:18_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
flipsnap.jsのコードを調べて、フリックの位置がcurrentXで管理されていることを
確認したので、currentXがどのようにずれるのかを調べました。
以下のjQueryを追加してタッチ後のcurrentXを確認するようにしていました。

$(document).on("touchend mouseup",function(){
 var myX = flipsnap.currentX;
 $(".debug").text(myX);
})

しかしバグが発生した状態でもcurrentXは正常の値を表示しており問題はありませんでした。
ここで早速手詰まりになったのですが、PCで動作確認中に表示されていた横スクロールを
移動してcurrentXを表示させたのです。すると見た目はずれているのにcurrentXは正常の
値となり、バグと同じ現象ではないか!となったのです。

 
つまりスマートフォンでは横スクロールは見えていなくても、操作が可能で希に操作されてしまう
ことでバグが発生していたのだと。ということで#showcaseのcssにoverflow:hidden;を
設定しスクロールバーを表示しないようにしました。

#showcase {
 width: 100%;
 position:relative;
 overflow:hidden;
}

そしたらバグは発生しないようになりました。めでたし、めでたし。
 
 
 

スマートフォン:flipsnap(4)

今回は一定時間ごとにページを切り替えるようにします。ポイントなのは
タッチしている間はページを切り替えないようにする点です。
 
 

一定時間ごとにページを切り替える

一定時間ごとにページを切り替えるにはjavaScriptのsetIntervalを利用します。
このサンプルはタッチ中にもページが切り替わってしまいます。そしてタッチ中に
ページが切り替わると画像がずれるバグとなります…。

一定時間ごとにページを切り替える
サンプル:16_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
注意点は以下のjQueryです。三項演算子を利用して次のページが最大ページを
越えていたら最初のページに移動し、そうでなければ次のページに移動します。
変数maxPageはjQueryの最初の部分で設定しています。

function changeFunc() {
 maxPage < flipsnap.currentPoint+1 ? flipsnap.moveToPoint(0) : flipsnap.toNext();
}
setInterval(changeFunc,5000);

 
 
 

タッチ中はページを切り替えないようにする

16_flipsnap.htmlはタッチ中にページが切り替わると画像がずれるバグがでます。
ですので、flicksimple.jsのようにタッチ中はページが切り替わらないように
しました。

タッチ中はページを切替えない
サンプル:17_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
flipsnapではタッチ中というフラグがないので、それはjQueryで補います。
以下の様にイベントハンドラを設定し、タッチ中はtouchFlgをtrueにします。

$("#showcase").on("touchstart mousedown" ,function(){touchFlg = true});
$("#showcase").on("touchend touchcancel mouseup" ,function(){touchFlg = false});

そして、ページ切り替えの際にtouchFlgがtrueだったら切り替えをしないようにします。

function changeFunc() {
 if ( touchFlg ) return;//----タッチ中であれば処理しない
 maxPage < flipsnap.currentPoint+1 ? flipsnap.moveToPoint(0) : flipsnap.toNext();
}

 
 
 

バグがでたよ〜〜

17_flipsnap.htmlはAndroidでもlockされないので、非常に実用的だと思うのですが
いろいろ動作確認をしていたら、バグを見つけました...。
縦スクロールとフリックが同時に発生するような動作(斜めの動き)で画像が
ずれることがあるのです...。Androidでは縦スクロールとフリックが同時に発生する
事はないようなのでバグは出せませんでした。

 
むむぅ。次回以降で何とか修正に挑戦したいと思います。
 
 
 

スマートフォン:flipsnap(3)

flicksimpleもステキだとは思うのですが、縦スクロールのロックがどうしても気になって
しまいます…。ですがflipsnap.jsではAndroidでも縦スクロールしているので、再度
flipsnap.jsに着目し、これを発展させてflicksimple.jpと同じようなことが
できるようにしたいと思います。
 
 

全幅対応:レイアウトが変わったら再設定をする

これまで紹介したflipsnapのサンプルでは指定したエリア内で画像を切り替えます。
まずは、これをブラウザの全幅を利用した仕様に変更しましょう。
全幅にするためにjavaScriptを追加する必要はありません。flicksimpleの
サンプルと同じようにCSSで設定しています。
 
ここで注意しなければいけないのが、縦向き/横向きにレイアウトを変更した際の
処理についてです。具体的に言うと、レイアウトが変わった際に初期化しないと
計算が合わなくなり、正常に機能しないのです。
 
しかし、flipsnapには初期化のためのrefreshというメソッドが搭載されており
これを実行すればブラウザの幅に合わせて再設定できます。これで問題が解決できます。

next/prevボタンの追加
サンプル:14_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
ポイントとなるjQueryは以下の部分です。flipsnapではflicksimpleと異なり
独自のイベントを持っていないので、代わりにjQueryのresizeイベントを利用して
ブラウザのサイズが変わったらリフレッシュ(再設定)します。
これで全幅にしても問題なくレイアウト変更に対応できます。

$(window).resize(function(){
 flipsnap.refresh();
})

 
 
 

ブラウザの幅に合わせて画像を拡大する

続いてブラウザの幅に合わせて画像を拡大するようにしました。これもjQueryの
resizeイベントを利用します。

next/prevボタンの追加
サンプル:15_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
以下の様に再設定の処理に画像のサイズ変更の処理を追加しています。また
最初に一度、resizeFuncを実行するようにしました。これを実行しないと最初は
cssの設定通りの画像サイズになるため、横レイアウトで起動した際に画像が大きく
ならないからです。

$(window).resize(resizeFunc);				
function resizeFunc() {
 var myWidth = $(document).width();
 myImage.css("width", myWidth);
 myImage.css("height", myWidth*0.5625);
 flipsnap.refresh();
}
※myImageはjQueryの最初の方で設定している画像のセレクタです

これで横レイアウトにしたときに画像が拡大されるようになりました。しかも
flicksimple.jsと異なりAndroidでも縦スクロールできます。
 
次回は一定時間でページを切り替えるようにします。
 
 
 

スマートフォン:flicksimple(5)

flicksimpleは前回で終わりにしようと思ったのですが、今回もflicksimpleにしました。
 

ブラウザの幅に合わせて画像を拡大縮小

横レイアウトにしたときに画像をブラウザ幅に合わせて拡大するサンプルを作成しました。
以下のキャプチャのように画像が横レイアウトで画像が拡大されていることが確認できます。
 

ブラウザ幅に合わせて画像を拡大
サンプル:13_flicksimple.html  ここで利用しているcssはこちら
※web-kit系のPCブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 
flicksimpleはレイアウトが変わったときにonResizeイベントが発生するので、そのイベントが
発生したらブラウザ幅に合わせて画像をリサイズしています。画像までのセレクタが長いので
最初に画像のオブジェクトをmyImageに代入しておきます。
onResizeイベントの設定はonChangeの方法と同じです。画像の高さを設定している部分にある
数値0.5625は、今回利用している画像のアスペクト比(180/320)です。

var myImage = $("#showcase>ul>li>a>img");

settingObj.onResize = function () {
 var myWidth = $(document).width();
 myImage.css("width", myWidth);
 myImage.css("height", myWidth*0.5625);
}

 
以前にflicksimpleで向きを変更すると、なんだかぎこちないと愚痴りましたが
これは、きちんと変更が完了してから設定を再設定しているためなのですね。
おかげで画像のサイズが変更された後でも正しい位置に表示されます。
 
 

注意点

Androidではフリックエリア上で縦スクロールが一切できないので(lockプロパティが効かない)
画像サイズを大きくしてshowcaseだけで画面を覆ってしまうと、非常に困った自体になります。
ですので今回サンプルとして作成しましたが、この設定は避けた方がよいのかもしれません。
 
 

Androidでのlockを外してみた

flipsnap.jsではAndroiddえもスクロールできるので、flicksimple.jsでも
できそうな気がします。ということでflicksimple.jsでAndroidを無条件に
lockしている部分を探して修正してみました…。
flicksimple.jsの278行目に以下の様なコードがあります。ここで無条件に
androidの場合はスクロールできないようにしています。

if ( o.android || o.lock ) {
 e.preventDefault();
}

ということで、ここでandroidの条件を外したのですが…。そうしたら
フリックの動作が非常に悪くなりました。雰囲気的にはブラウザの縦スクロールと
jQueryの横スクロールが同時にできない感じで、純粋にどちらか一方の操作を
しないと機能しないといった感じです。
だからAndroidは無条件にlockされているのですね…。
 
でも、これは何とかしたいなぁ…。