spinnerbox

Members
  • Content Count

    297
  • Joined

  • Last visited

Everything posted by spinnerbox

  1. spinnerbox

    Setting width and height to Phaser.Text behaves strangely?

    Well I found a workaround solution by removing the width/height statements and setting font size as large as 140pt Still don't understand what is wrong with the text fields though
  2. I am using this code to create my text field on screen: screenTypingTextField = gameObject.add.text(200, 520, "", si.Utility.getTextStyleScreenTypingTextGreen()); screenTypingTextField.alpha = 0.5; screenTypingTextField.anchor.setTo(0.5, 0.5); //screenTypingTextField.width = 480; //screenTypingTextField.height = 240; thisObject.menuObjects.add(screenTypingTextField); textStyleScreenTypingTextGreen = { font :'70pt Arial', align : 'center', fill: 'Green' }, As you can see I have commented the width and height rows. Its because when i run this code again by entering the same scene that uses this code, it then starts to spread the text over all screen, even bigger. Is this the right way to create text and then set its width and height? Or I should just use the font to set text field size? here is a picture of my typing text field in green spread all over the screen
  3. spinnerbox

    Setting width and height to Phaser.Text behaves strangely?

    Nobody understands what is happening?
  4. With some hacks from these two links: http://stackoverflow.com/questions/21406781/how-can-i-bring-up-the-keyboard-on-mobile-devices-to-catch-the-input-for-drawing?lq=1 I managed to open the keyboard on my android device. However the keystrokes i do are not sent to the Phaser game i.e my Phaser text field is not filled with data. <input id="hiddenInput" type="text" name="hiddenInput" style="position:absolute; left:-1px; top: -1px; width:1px; height:1px; opacity:0;"/> <script> $(document).ready( function() { $("#hiddenInput").focus(); }); </script> I am using Intel XDK and I upgraded my project to use cordova plugins. I installed ionic-plugin-keyboard but it behaves similar, i.e show/hide the keyboard but the input is not detected by Phaser. What do I miss to do or what do i do wrong? Any suggestions?
  5. spinnerbox

    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.
  6. spinnerbox

    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.
  7. spinnerbox

    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.
  8. spinnerbox

    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.
  9. 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>
  10. 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?
  11. 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?
  12. spinnerbox

    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?
  13. spinnerbox

    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?
  14. spinnerbox

    Throw flowers with light explosion?

    I have a basket of flowers. When certain condition is met, the basket will blow and the flowers inside are thrown everywhere. I know some physics and gravity would be included. What would be the best approach to achieve this effect?
  15. spinnerbox

    Throw flowers with light explosion?

    Ok, ok, how about, which event is fired when the emitter stops? Can i run a function at that time? Or is there such event?
  16. spinnerbox

    Throw flowers with light explosion?

    What if I want to mix flowers with different colours, is there an option to mix sprites? Or just use separate emitters?
  17. spinnerbox

    Throw flowers with light explosion?

    Does this particle stuff need WebGL? Can it be achieved with 2D physics?
  18. 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?
  19. spinnerbox

    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); },
  20. spinnerbox

    RPG/GTA style web game using google maps

    I will be adopted by Chuck Norris Great, its fun! Maybe a health bar would look nicely when beating someone. You could also add achievements. But how do I pause it? Does Phaser pauses it when out of focus?
  21. spinnerbox

    Is there a way to resume tween from the start?

    Which one of these is Yoyo? http://sole.github.io/tween.js/examples/03_graphs.html
  22. spinnerbox

    Is there a way to resume tween from the start?

    I don't think tweens are designed to be fiddled like timers. It just starts and works until it reaches the end state. You can pause it but cannot reset it. Recreate the tween with same settings, to reset it from start, maybe? You could also play with timers and set properties of game objects with timers. But I don't know how Yoyo curve looks like Set a value for a game object property calculated by Yoyo function at a given time. Since it will be a timer, you can stop, pause, reset, loop...
  23. spinnerbox

    Is there a way to resume tween from the start?

    https://phaser.io/examples/v2/category/tweens https://phaser.io/examples/v2/tweens/pause-tween https://phaser.io/examples/v2/tweens/yoyo Also consult the Tween API You can add events onStart, onComplete, onRepeat, onLoop
  24. spinnerbox

    modularizing documents

    canvas is just a tag in the DOM. window is the parent element of all other elements in the DOM. You can draw fast graphics in canvas. You could also do some drawing with CSS and HTML, but the DOM is very slow. So there is the difference. That is why Phaser works in canvas, not in the DOM.
  25. spinnerbox

    how to debug gamestate starting time?

    The admob plugin loads something(ad image) or it just hangs? Explain more please. And by the way, admob is an Android plugin or you include it in javascript? Share some link, which plugin is that you use.