spinnerbox

Members
  • Content count

    294
  • Joined

  • Last visited

About spinnerbox

  • Rank
    Advanced Member
  • Birthday 12/31/1986

Contact Methods

  • Website URL
    http://spinnerbox.blogspot.com
  • Twitter
    spinnerbox

Profile Information

  • Gender
    Male
  • Location
    Macedonia, Skopje
  • Interests
    Game desgin and development. My other R&D blog: http://tunephp.blogspot.com

Recent Profile Visitors

1,634 profile views
  1. canvas.toBlob/toDataURL as Phaser Image

    I have been given a task with blobs in browser and i came up with a solution here I had to convert MathML to an image. MathML is xml for maths. You can encode it with toDataUrl or with btoa and save it as text. This would be your base64 string which can then be used to revert it back to MathML, with function atob More about baser64 string here I will post just the example code. Other stuff at the link var canvasblobapp = (function (win, jq) {'use strict'; return { pageReady: function () { var img = new Image(), canvas = document.getElementById('image'), canvas1 = document.getElementById('illustration'), ctx = canvas.getContext('2d'), ctx1 = canvas1.getContext('2d'), blob = null, base64String = "", imgTag = document.createElement("img"), imgTag1 = document.createElement("img"); // draw the image img.src = 'img/jabolche.png'; img.onload = function () { canvas.width = this.width; canvas.height = this.height; ctx.drawImage(img, 0, 0); base64String = canvas.toDataURL("image/png", 0.92); imgTag.src = base64String; imgTag.id = "newImage"; window.document.getElementById('result').appendChild(imgTag); }; // draw the cloud illustration ctx1.beginPath(); ctx1.moveTo(170, 80); ctx1.bezierCurveTo(130, 100, 130, 150, 230, 150); ctx1.bezierCurveTo(250, 180, 320, 180, 340, 150); ctx1.bezierCurveTo(420, 150, 420, 120, 390, 100); ctx1.bezierCurveTo(430, 40, 370, 30, 340, 50); ctx1.bezierCurveTo(320, 5, 250, 20, 250, 50); ctx1.bezierCurveTo(200, 5, 150, 20, 170, 80); ctx1.closePath(); ctx1.lineWidth = 5; ctx1.fillStyle = '#8ED6FF'; ctx1.fill(); ctx1.strokeStyle = '#0000ff'; ctx1.stroke(); imgTag1.src = canvas1.toDataURL("image/png", 0.92); imgTag1.id = "newIllustration"; document.getElementById('result').appendChild(imgTag1); } }; }(window, $)); $(document).ready(canvasblobapp.pageReady); In the example I load image object and onload i draw it in the canvas, plus I take the base64 string which when set as a src on and "image" tag displays your image, meaning, base64 represents an object in the browser memory which gets deleted when you close your browser.
  2. Redirect soft keyboard input to Phaser text filed?

    I don't understad what is actually this.$input . Can you clarify? Also, is this the appropriate way to remove the event handler? this.inputListener = null; this.$input.removeEventListener('input', this.softKeyboardInputChanged); I need to add and remove the handler, all the time, i.e in periods. The keyboard is on until you hit the appropriate key combo or until a condition is met, then the event is removed and the keyboard becomes unusable. After a few seconds the keyboard gets enabled again and this repeats, over and over until all key combos are hit correctly.
  3. Redirect soft keyboard input to Phaser text filed?

    I already have a keypress handler and the Android simulator with my game in it works well with the physical keyboard. Not sure why the same thing does not apply to the soft keyboard. but I will check your code sample. Maybe I miss something.
  4. Redirect soft keyboard input to Phaser text filed?

    I can bring the keyboard up but it seems the input of the soft keyboard doesn't get to the canvas. it fills the hidden text box but the canvas doesn't react to it. The input from the soft keyboard just doesn't get detected by the canvas/javascript.
  5. Well actually it was on Phaser.AUTO. The problem wasn't the canvas itself, I forgot to add some settings to my webview. It works even on Android 4.4 but without the audio. On Android 5.1 it works just fine. Here is my activity code: package sandhiflowers.game.com; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; import android.view.inputmethod.InputMethodManager; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { private WebView mWebView; private String GAME_URL = "file:///android_asset/www/index.html"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.activity_main_webview); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setDomStorageEnabled(true); webSettings.setDatabaseEnabled(true); webSettings.setPluginState(WebSettings.PluginState.ON); webSettings.setAllowFileAccess(true); webSettings.setAllowContentAccess(true); webSettings.setAllowFileAccessFromFileURLs(true); webSettings.setAllowUniversalAccessFromFileURLs(true); webSettings.setUseWideViewPort(true); mWebView.setWebViewClient(new MyAppWebViewClient()); InputMethodManager imeManager = (InputMethodManager) getApplicationContext().getSystemService(INPUT_METHOD_SERVICE); imeManager.showInputMethodPicker(); } @Override public void onResume(){ mWebView.loadUrl(GAME_URL); super.onResume(); } @Override public void onBackPressed() { if(mWebView.canGoBack()) { mWebView.goBack(); } else { super.onBackPressed(); } } } Some parts like setPluginState(WebSettings.PluginState.ON); function are deprecated but will post when i find reasonable replacement. My java helper file: package sandhiflowers.game.com; import android.content.Intent; import android.net.Uri; import android.webkit.WebView; import android.webkit.WebViewClient; /** * Created by vlado on 20.9.17. */ public class MyAppWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if(Uri.parse(url).getHost().length() == 0) { return false; } Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); view.getContext().startActivity(intent); return true; } } my manifest file: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="sandhiflowers.game.com" > <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.AppCompat.NoActionBar"> <activity android:name=".MainActivity" android:screenOrientation="portrait"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> <uses-permission android:name="android.permission.INTERNET" /> </manifest>
  6. I tried with the good "old" Crosswalk but sadly Android cmd tools were changed so I now cannot build apps with Crosswalk. Now there is Android 4.4, KitKat, WebView. I managed to make a hybrid app up and running, however I see the grey background or blank/black canvas instead of my game. I found some links, and people say that I should disable hardware acceleration for WebView which i did, and then the black canvas appeared. What do you recommend, switch to newer WebView version or I am missing something? Android manifest xml: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="sandhiflowers.game.com" > <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" android:hardwareAccelerated="true" > <activity android:name=".MainActivity" android:hardwareAccelerated="false"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> <uses-permission android:name="android.permission.INTERNET" /> </manifest> As you can seen, hardware acceleration was enabled application wide, but disabled only for the MainActivity. Before doing this, no canvas was visible, only the gray page background. When I disabled hardware acceleration then this black rectangle appeared. My MainActivity.java file: package sandhiflowers.game.com; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.activity_main_webview); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); mWebView.setWebViewClient(new MyAppWebViewClient()); } @Override public void onResume(){ mWebView.loadUrl("file:///android_asset/www/index.html"); super.onResume(); } @Override public void onBackPressed() { if(mWebView.canGoBack()) { mWebView.goBack(); } else { super.onBackPressed(); } } } Any ideas?
  7. I see the docs of the Body class http://phaser.io/docs/2.6.2/Phaser.Physics.Arcade.Body.html But i am not sure which would be the right property to change. I have two balloons falling down and they might both at the same time or one after the other, hit my rectangle. The problem is, both objects stop moving after they hit the rectangle. i am sure this has to do something with physics. As if the vertical(y coordinate) velocity gets set to 0 when they hit the rectangle. Here is a sample code: graphics = si.gameObject.add.sprite(boxX, boxY, si.ImageAssetKeys.BALLOON_ANIM_ATLAS, 0); floatingAnim = graphics.animations.add('floating', si.GraphicsUtility.getFloatingAnimArray(), 30, true); splashAnim = graphics.animations.add('splash', si.GraphicsUtility.getSplashAnimArray(), 30, false); splashAnim.onComplete.add(si.LetterBox.splashComplete, this); graphics.animations.play('floating'); balloon.graphics = graphics; balloon.graphics.anchor.setTo(0.5, 0.5); balloon.graphics.body.checkCollision.up = false; balloon.graphics.body.checkCollision.left = false; balloon.graphics.body.checkCollision.right = false; balloon.graphics.body.checkCollision.down = true; balloon.graphics.body.velocity.y = velocity; balloon.graphics.allowGravity = false; balloon.graphics.allowRotation = false; Which body property should I change to prevent the stop in movement of balloons?
  8. Animate water ripple?

    Does Phaser ellipse has some option to draw just the border? Or i just draw two ellipses one on top of the other and maybe use mask?
  9. Animate water ripple?

    I need to make a water ripple effect in Phaser with Phaser animation. Yes I will create spritesheet but how to achieve it without doing too much? I can draw with Inkscape? Is there some filter or tool I can use to draw this in inkscape? Or should I just redraw thin ellipses on update event?
  10. Enable/disable keyboard input on specific keys?

    Not sure if there is cleaner way to enable/disable keyboard input like for buttons, button.inputEnabled = false/true, but I created my own functions and used add/remove functions of the Phaser.Signal class: initKeyboard: function() { aKey = gameObject.input.keyboard.addKey(phaser.Keyboard.A); aKey.onDown.add(this.guess, answer1Btn); leftKey = gameObject.input.keyboard.addKey(phaser.Keyboard.LEFT); leftKey.onDown.add(this.guess, answer1Btn); uKey = gameObject.input.keyboard.addKey(phaser.Keyboard.U); uKey.onDown.add(this.updateFields, this); pKey = gameObject.input.keyboard.addKey(phaser.Keyboard.P); pKey.onDown.add(this.pauseUnpauseGame, this); oKey = gameObject.input.keyboard.addKey(phaser.Keyboard.O); oKey.onDown.add(this.saveData, this); spaceKey = gameObject.input.keyboard.addKey(phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(this.submit, this); enterKey = gameObject.input.keyboard.addKey(phaser.Keyboard.ENTER); enterKey.onDown.add(this.submit, this); iKey = gameObject.input.keyboard.addKey(phaser.Keyboard.I); iKey.onDown.add(this.showResetWindow, this); }, disableKeys: function() { aKey.onDown.remove(this.guess, answer1Btn); leftKey.onDown.remove(this.guess, answer1Btn); spaceKey.onDown.remove(this.submit, this); enterKey.onDown.remove(this.submit, this); uKey.onDown.remove(this.updateFields, this); }, enableKeys: function() { aKey.onDown.add(this.guess, answer1Btn); leftKey.onDown.add(this.guess, answer1Btn); spaceKey.onDown.add(this.submit, this); enterKey.onDown.add(this.submit, this); uKey.onDown.add(this.updateFields, this); },
  11. In my main scene I add keyboard event listeners to specific keys in the init() state. Also some of those keys need to be disabled at specific time and re-enabled at specific time. How can I disable/enable input on specific keyboard buttons at runtime?