mberube's Forum Posts

  • 11 posts

  • Yes I'm using C2 runtime for retro compatibility with IE11 and Edge + WebGL1.

    I agree that this should not happen (font-face not rendering properly), but it is sadly a 100% repro step for us for the last 3-4 years.

    Construct is not the problem here, it is really a browser font loading VS synchronisation timing problem.

    Thanks!

  • Microsoft Internet Explorer 11 and Edge browser do not render local font files FACE on text objects on start of layout, displaying fallback font like Time New Roman instead.

    By local font files, I mean downloaded Google fonts, like: Exo, Krub, worksans in 3 formats (ttf,woff,woff2)

    It is a known issue also occurring on standard HTML5 tags and CSS, not just in canvas.

    (YES bad browsers)

    Working & tested solution that I wish to share:

    • Once all text treatments are done (if any): Ajax local translation file loaded and text updated
    • Or On Start of Layout
    • Create a Family with all text object from your game. Call a function that loop all objects and change the size property
    • This will force re rendering of the text objects with the right font-face

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • hi Ashley.

    To follow up on this topic, I've tried many solutions,

    but the bidirectional RTL support is really needed for the text label object.

    Has a company, we need to support Arabic language in most of our games.

    Thanks!

  • Ok! I have found a solution using HTML Textarea and CSS stylesheet instead of Canvas text element.

    First step: Create a styles.css stylesheet in the "Files" folder of your project with the following styles:

    (examples)

    (For now the direction:rtl is set to all, as a test) 

    	textarea
{
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-webkit-touch-callout: none;
	color: white;
	user-select: none;
	font-weight: 900;
	background-color: transparent;
	border: 0;
	font-family: 'OpenSans-ExtraBold';
	text-shadow: -1px -1px 2px #000000, 1px 1px 2px #000000;
	overflow: hidden;
	direction: rtl;
	
}
textarea:focus { 
	outline: none; 
	cursor: default;
}

    Second Step: Insert the styles.css in the head of the exported index.html file by adding the following JS script on start of layout: 

    	"
var nameScript = 'styles.css';

//C2 Runtime
if (typeof this.runtime !== 'undefined'){
	nameScript = this.runtime.getProjectFileUrl(nameScript);
}
//C3 Runtime
if (typeof this._runtime !== 'undefined'){
	nameScript = this._runtime.GetAssetManager().GetProjectFileUrl(nameScript);
}

var ss = document.createElement('link');
ss.type = 'text/css';
ss.rel = 'stylesheet';
ss.href = nameScript;
document.getElementsByTagName('head')[0].appendChild(ss);
"

    Third step: Create the textareas with text set at auto-resize.

    Fourth step: Add logic that would set the direction RTL only for "ar-me" text.

    I will post my solution on this soon...

  • Any hint on this Ashley?

  • Has it is described in W3C documentation and supported in HTML css definition with "direction:rtl"

    w3.org/International/questions/qa-html-dir

    We need support in construct 3 text object for Arabic Right to left bidirectional direction.

    What is the way to integrate it on a text object or all text elements?

    I know that setting "dir='rtl'" on a canvas should do the trick, but since construct generate the canvas dynamicly, i'm not sure how to do it!

    Thanks

    Tagged:

  • If your are looking for a C2 & C3 runtime compatibility: 

    "var nameScript = 'external.js';
//C2 Runtime
if (typeof this.runtime !== 'undefined'){
	nameScript = this.runtime.getProjectFileUrl(nameScript);
}
//C3 Runtime
if (typeof this._runtime !== 'undefined'){
	nameScript = this._runtime.GetAssetManager().GetProjectFileUrl(nameScript);
}
var jsFile= document.createElement('script');
jsFile.src = nameScript;
document.head.appendChild(jsFile);"

  • -> leaderboard_Image: Load image from str(InstantGames.LeaderboardPlayerPhotoURLAt(LoopIndex)) (Keep current size, cross-origin anonymous)

    'LoopIndex' is the index value of the current loop iteration

    Here is some other item you can get from InstantGames Leaderboard:

    -> sf_leaderboard_userRank: Set text to InstantGames.LeaderboardRankAt(LoopIndex)

    -> sf_leaderboard_userName: Set text to uppercase (InstantGames.LeaderboardPlayerNameAt(LoopIndex))

    -> sf_leaderboard_userScore: Set text to InstantGames.LeaderboardScoreAt(LoopIndex)

  • Also, here is an updated script for the include of the Javascript file, has the include URL is different in 'preview' mode versus exported in html5: 

    var nameScript = 'external.js';
// Preview mode: need to look in the project file map to find what the blob URL is for this filename.
if (typeof this.runtime !== 'undefined' && typeof this.runtime.isPreview !== 'undefined'){
	if (this.runtime.isPreview){
		nameScript = this.runtime.getProjectFileUrl(nameScript);
	}
}
var jsFile= document.createElement('script');
jsFile.src = nameScript;
document.head.appendChild(jsFile); 
console.log('include project JS file: ' + nameScript);

    Note that i'm now able to call all FBInstant functions from this 'external.js' example: 

    //Returns whether or not the user is eligible to have shortcut creation requested.
window.fb_createShortcutAsync = function() {
	
	console.log("FBInstant CreateShortcutAsync");
	
	FBInstant.canCreateShortcutAsync()
		.then(function(canCreateShortcut) {
		if (canCreateShortcut) {
			
			FBInstant.createShortcutAsync()
				.then(function() {
				// Shortcut created
				console.log("-> Shortcut created");
				c2_callFunction("callback_canCreateShortcutAsync", ["Created"]);
			})
				.catch(function() {
				// Shortcut not created
				console.log("-> Shortcut not created");
				c2_callFunction("callback_canCreateShortcutAsync", ["Not Created"]);
			});
		}
	});
	
};

  • Here is an example of integration that allows the use of any javascript within the Construct context:

    1. The 'external.js' file is the 'file' folder of the Construct 3 project
    2. On start of layout we valid that the JS file has not been loaded by verifying the value of our specific boolean variable. I used "ValerypopoffJS" addons to be able to add JS comparison condition
    3. The 'external.js' file is added to the header of the index.html document. Note that we used "this.runtime.getProjectFileUrl(nameScript)" to get the real URL context
    4. Then on touch of a button or other event we call call the external JS function with the Browser execute Javascript
    5. The callback is set within the function as the 'return' would normally "c2_callFunction("CallBackRandomString", [text]);". It triggers the corresponding 'On' function defined in construct

  • The Business Review can be complicated and take many days as you must send real paper proof by mail (receipt, bill, ...).

    But then, the Instant Game & Facebook App review process took less than 48h.

    We still have many struggles with Facebook SDK functions not in C3 interface yet.

    We successfully launch our first C3 Instant Game Yesterday [Morph] (open only to Canada for now): facebook.com/instantgames/play/240971203362509

    Thanks a lot to C3 team and community!!

  • 11 posts