spinnerbox

Will not spam. You are quite right about my post. Babilon, Pixi and Phaser are all JavaScript. You can mix them together. Maybe even organize them with some Angular code. Well depends on your JavaScript coding skills. I probably can google about complex projects made with these three, but If you can name some of them, I would like to see. Probably @coelacanth would also like to see some examples made with these three. I cannot recall the name of that browser game made by Firefox team? It was with multiplayer and it was RPG. You are a knight and you walk on a pixelated map. You gather potions and weapons and as you go, you kill monsters which give you experience points. As you get more experienced you get to kill bosses I think and visit hidden places like dungeons and caves. And this all was built I think with Phaser and some other tools, probably Socket.io or the like. EDIT: Yes got it: BrowserQuest, Article on the game Phaserquest - BroswerQuest made with Phaser

I have worked with Phaser. Since it is open source it missed some functionalities which I built myself in JavaScript. I have never built a game with an RPG complexity, yet be it of production quality to sell it for money, so I cannot tell about maturity of Phaser. I haven't used those other tools, Pixi and Babilon, so I cannot tell about them. But I know that Blizzard's Hearthstone is built with Unity 3D so you might try that one too. But your game will run in Unity player browser plugin, so you have to decide if the game should run in a browser without using plugins. And yes, whatever you choose, you will always need to build your own custom tools to simplify your work.

Yes, didn't know that, Phaser 2.6 turned into Phaser Community Edition. I have the docs now. Should I upgrade Phaser 2.6.2 to Phaser 2.7.0? Are they very different?

Hello. I recently visited this site and when I downloaded the Phaser Github repo, I found that it is not version 2.6.2 but it was version 3. But ok, that is not the worst problem. When I cloned the repo, the docs folder weren't downloaded. I also found that in that .eslintignore file, there was a line docs/* which of course means, ignore the docs folder. Also another strange thing is, when I cloned the repo, in my local repository of Phaser, the file .eslintignore didn't contain the line docs/* which is what the hell. Do I need to build Phaser or docs in order to have them. But I already run npm install npm run lint npm run build which only built Phaser. It didn't generate docs, what the hell. Some tricks going on. How do i get the docs? Also should I upgrade my Phaser 2.6 games to Phaser 3? Are they very different from each other?

Given that I find time to do this i might even pay some cash for a good work(If you are using PayPal or Skrill maybe). I am in search for good illustrator to help me create fighting game characters which will be put inside this game engine MUGEN Well since this is Phaser game engine site, wan't sure if this is the right place to ask. I would like to see some portfolio, illustrator experience and game animation experience.

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

Nobody understands what is happening?

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

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.

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.

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.

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.

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>

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?

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?