Pastelkatto
Explorer
Pastelkatto
Explorer
Activity
‎Feb 18, 2020
02:42 AM
Oh I see, thank you!
... View more
‎Feb 17, 2020
01:05 PM
I'm using swapChildren to swap layers with certain objects in my HTML5 canvas. When I export in Animate CC 2019 this works perfectly, however in Animate CC 2020 nothing happens (using the exact same file with no code or settings changed) and nothing shows in console log. Is this a bug in Animate or something I'm doing wrong with the newest update?
... View more
‎Oct 12, 2018
04:05 PM
The problem I have with my HTML5 canvas is that it seems to always keep the original aspect ratio that's set in Animate CC (750x1110px) and cut out everything outside of it. This is the code I have: window.addEventListener('resize', resize, false); function resize() { if (stage.canvas.width < stage.canvas.height * 0.67) { stage.canvas.width = window.innerWidth; stage.canvas.height = window.innerHeight; var scaledif = self.Firstassets.scaleX / stage.scaleX; self.Firstassets.x = (stage.canvas.width / 2) * scaledif; self.Firstassets.y = (stage.canvas.height / 2) * scaledif; console.log("Mode1 portrait"); } else if (stage.canvas.width > stage.canvas.height * 1.16) { stage.canvas.width = window.innerWidth; stage.canvas.height = window.innerHeight; var scaledif = self.Firstassets.scaleX / stage.scaleX; self.Firstassets.x = (stage.canvas.width / 2) * scaledif; self.Firstassets.y = (stage.canvas.height / 2) * scaledif; console.log("Mode2 landscape"); } else { stage.canvas.width = window.innerWidth; stage.canvas.height = window.innerHeight; var scaledif = self.Firstassets.scaleX / stage.scaleX; self.Firstassets.x = (stage.canvas.width / 2) * scaledif; self.Firstassets.y = (stage.canvas.height / 2) * scaledif; console.log("Mode3 portrait"); } } "Firstassets" is a movieclip containing three objects, depending on the window size there should be extra space added to the width or height around the movieclip. "scaledif" is added since the stage is scaled down while Firstassets isn't so I had to add some extra to get it right in the middle. The publish settings I use are "center (both)", "make responsive (both)" and "scale to fill visible area (fit in view)" (stretch to fit blows up the size so you'll just see a fraction of the game). What this does is that the canvas is as wide as the window, but it seems that the whole game is in another container that still keeps the original aspect ratio so the entire game gets smushed up to fit into the second container. I found that when I tested it and changed the width the element.style of animation_container and canvas to 1133, it filled the entire window and everything was scaled properly, no stretching. I don't have much experience with HTML5 canvases, mainly flash (AS3) so now I'm wondering if anyone here knows what I can do to make this game load properly? Either with javascript or if it's possible to change anything in the HTML template. Again, I don't really know much so I'm not sure where and what I need to change something. Thank you!
... View more
‎Oct 05, 2018
01:31 PM
I'm currently working on a responsive design for an android app. I wrote a resize event listener and tested it while setting the target to flash player so I could change the window size while testing. It worked properly, it also worked properly when testing it with the target set to AIR for Android. However when I installed the app on my own android device (samsung galaxy s7) several parts are misplaced. Since it's working while testing I assume that I have written the actual event listener right but I don't understand why some items are misplaced on an actual device. I have three different if statements in my resize listener, the other two works fine (two different settings for a portrait format) but only the landscape one is not working. It's quite a lot of code for the entire resize event so I'll just add the part of the code that covers the landscape setting. I have added "import flash.display.StageScaleMode;" and "import flash.display.StageAlign;", scaleMode is set to "NO_SCALE" and align is set to "TOP_LEFT" else if (swfWidth > swfHeight * 1.16) { Panels2color.visible = true; Panels2.visible = true; Background.height = swfHeight; Background.scaleX = Background.scaleY; Background.x = Panels2.width + (Background.width * 0.5) + ((stage.stageWidth - Panels2.width - Background.width) * 0.5); Background.y = stage.stageHeight / 2; Character.scaleY = Background.scaleY; Character.scaleX = Character.scaleY; Character.x = Panels2.width + (Background.width * 0.5) + ((stage.stageWidth - Panels2.width - Background.width) * 0.5); Character.y = stage.stageHeight / 2; Panels2color.scaleX = Background.scaleX; Panels2color.scaleY = Panels2color.scaleX; Panels2color.x = (Panels2color.width * 0.5) + ((stage.stageWidth - Panels2.width - Background.width) * 0.5); Panels2color.y = (stage.stageHeight * 0.22) + Panels2color.height; Panels2.scaleX = Background.scaleX; Panels2.scaleY = Panels2.scaleX; Panels2.x = (Panels2color.width * 0.5) + ((stage.stageWidth - Panels2.width - Background.width) * 0.5); Panels2.y = (stage.stageHeight * 0.22); Landscapemenu.scaleX = Background.scaleX; Landscapemenu.scaleY = Landscapemenu.scaleX; Landscapemenu.x = (Panels2color.width * 0.5) + ((stage.stageWidth - Panels2.width - Background.width) * 0.5); Landscapemenu.y = 0; Landscapemenu.visible = true; Panels3landscape.visible = true; Panels1landscape.visible = true; Panels3.visible = false; Panels1.visible = false; Panels2.Gotocolors.visible = false; Panels2color.Gotoitems.visible = false; Panels3landscape.scaleY = Background.scaleY; Panels3landscape.scaleX = Panels3landscape.scaleY; Panels3landscape.x = (Panels2color.width * 0.5) + ((stage.stageWidth - Panels2.width - Background.width) * 0.5) - (Panels2color.width * 0.42); Panels3landscape.y = Landscapemenu.height * 0.845; Panels1landscape.scaleY = Background.scaleY; Panels1landscape.scaleX = Panels1landscape.scaleY; Panels1landscape.x = (Panels2color.width * 0.5) + ((stage.stageWidth - Panels2.width - Background.width) * 0.5) - (Panels2color.width * 0.485); Panels1landscape.y = Landscapemenu.height * 0.065; } Does anyone know what's wrong? I'll add photos that shows what I'm writing about and to make sense of the code I pointed out what parts have what instance name as well as where the registration point is, although since it's working properly when testing I have a hard time seeing that the actual resize event code is what's wrong...
... View more
‎Dec 11, 2017
10:17 AM
Hello! I'm currently trying to create a dress up game for AIR. I've previously done flash games for desktop and to save the picture you've made I've used the JPGEncoder. I tried using it for the app as well but I'm having some issues. After giving the app proper permission, I test the game in my Android phone and I get a "save as" prompt, the problem however is that you can't find the picture anywhere. At first I thought it wasn't saving it at all, however the other day I was going through the files of my phone and found one picture saved from the game, I can't remember where I found it but it certainly wasn't in any picture folders or the downloads folder. So it seems that my issue is not that the picture is not taken and not saved, but more of an issue of where it's saved. I couldn't choose where to save the picture. Is there a way to get the picture to be saved in a folder where the user will easily be able to find them? Or choose location? I'm very much new with apps so I'm not entirely sure of how this works. This is what the code I use looks like: import com.adobe.images.JPGEncoder; import flash.display.BitmapData; import flash.utils.ByteArray; import flash.net.FileReference; import flash.geom.Rectangle; import flash.geom.Point; Savepicbutton.addEventListener(MouseEvent.CLICK, SavepicbuttonClick); function SavepicbuttonClick(e: MouseEvent): void { Savepicbutton.visible = false; Linkbutton3.visible = false; Linkbutton4.visible = false; Linkbutton2.visible = false; var bitmapData: BitmapData = new BitmapData(1200, 900); bitmapData.draw(root); var newBmp: BitmapData = new BitmapData(700, 900); newBmp.copyPixels(bitmapData, new Rectangle(500, 0, 1200, 900), new Point()); var jpgThingy: JPGEncoder = new JPGEncoder(100); var byteArray: ByteArray = jpgThingy.encode(newBmp); var fileReference: FileReference = new FileReference(); fileReference.save(byteArray, "gamesnapshot.jpg"); Savepicbutton.visible = true; Linkbutton2.visible = true; } Thanks!
... View more
‎Nov 03, 2017
03:08 PM
Alright, I see. Well thanks for your help!
... View more
‎Nov 03, 2017
01:03 PM
Although if the registration point was off, the item would just be placed off but still move with the edge of the window. I posted the game to dropbox over here: Dropbox - testgame.fla A simple example game just to get the buttons to work properly before implementing it in the actual game
... View more
‎Nov 03, 2017
12:38 PM
I attempted removing the first two lines and adding it into a resize listener, but sadly I get the same result. This is what I have now: stage.addEventListener(Event.RESIZE, resizeListener); function resizeListener(e: Event): void { trace("stageWidth: " + stage.stageWidth + " stageHeight: " + stage.stageHeight); var realheight = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY) var realwidth = Math.max(Capabilities.screenResolutionX, Capabilities.screenResolutionY) var vr = realwidth / realheight; var ew = 480 * vr; var gap = Math.floor((ew - 800) / 2); button1.x = 1 - gap; }
... View more
‎Nov 03, 2017
11:41 AM
I had a good look at it and attempted to use it for one of the buttons to the left, but it still won't work. The button stays on the same position as I resize the window. What I have is stage.scaleMode = StageScaleMode.SHOW_ALL; stage.align = StageAlign.TOP_LEFT; var realheight = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY) var realwidth = Math.max(Capabilities.screenResolutionX, Capabilities.screenResolutionY) var vr = realwidth / realheight; var ew = 480 * vr; var gap = Math.floor((ew - 800) / 2); button1.x = 1 - gap; If I change the stage alignment to right, the button will be placed in the middle and follow the right side as resizing the screen.
... View more
‎Nov 03, 2017
09:36 AM
Hello! I'm wondering if it's possible to have certain objects on the stage responsive while the scaleMode is set to SHOW_ALL? For example, I want some buttons to stay to the right of the stage (button1.x = 5;) and some to the left (button2.x = stage.stageWidth -5;) to make use of the screen of wider devices, but I've found that I can only get that to work on scaleMode NO_SCALE. But if I put the game on NO_SCALE, vital parts of the game gets cut out by the window (and I assume that parts of the game will also get cut out on some devices if the screen resolution is smaller than the game resolution?). Thanks!
... View more
‎Oct 30, 2017
04:03 PM
Thank you for this response. I added the loader code and I didn't know about TinyPNG, so I used it for the spritesheets and given how it managed to reduce them with 73%, it gotta help with the loading time. As for text and tweens, I don't use any, all text are bitmaps. But I'll keep that in mind for future projects! I also do use addChild, the user can choose between four layers to put the draggable items as some are supposed to be behind the character and some in front. Although the game has worked just fine for me all of the time, I keep getting complaints daily about performance issues. Some websites doesn't even want to publish the game as they find it run too slow and is unstable. I hope that this has helped somewhat for these.
... View more
‎Oct 30, 2017
08:18 AM
Hello! I just finished an HTML5 dress up game. I did it exactly like I used to with my flash games (but of course in javascript instead of AS3). However the result is a poorly performing game. It works pretty well when testing locally (although it takes 5-10 minutes to start the test), but online it's slow, laggy and some people can't even get past the loading screen. When discussing with other developers (although the ones I talked to were pretty much as new to HTML5 as I am), we concluded that it's probably because the game is so big and have so many items in it. As a dress up game it's pretty heavy on the images. Now I wonder, is there anything I can do to make the game faster and more stable? (note that I'm a novice in working with HTML5 canvases, I only work in Animate CC with the code on the frames) In my next game I'm lowering down the amount of items used and lowering the resolution. Before I used 1200x900px, which is certainly bigger than the standard 800x600px, but it allowed me to create better artworks for it and flash could take it. Now I'm trying a portrait format in 626x900px, so at least a big chunk of the game is cut out. In order to use color filters I cache all bitmaps that these filters will be applied to and I'm not sure if it matters but I do cache the smallest area possible to cover them. I've also tried to reduce the quality of the images in publishing options but anything less than 32 bits removed the transparency on the pictures which doesn't really work in this game. Is there anything else I can do? I'm thinking (and also kinda hope) that I'm missing something really obvious just because I'm a noob. You can try the game in question over here: Tomboy Creator HTML5 That is if you can get past the loading screen. It seems that the game works the best on desktop and chrome. Any other combination of device and browser will cause different issues to show up. I would continue working in flash but now more and more website refuses to even publish flash games, so it's not much of an option anymore.
... View more
‎Sep 22, 2017
03:04 PM
Good point! I just checked it and sure enough, it's not triggering the wrong function. Which just made me realise that it's probably the cache, so I tried to cache the items in the first function as well and now it's working properly. I guess the solution is to cache all of the movieclips and use updateCache every time I do something to the movieclips!
... View more
‎Sep 22, 2017
01:44 PM
Hello! I have an issue with certain buttons seemingly taking the functions of the buttons used before them. Or I assume that it's the function taking the contents of the functions executed before them. This is my first HTML5 canvas, I've been doing dollmakers for years with Actionscript 3 (and 2 before that), so I'm still at the point where I'm not fully sure of what I'm doing. To start of with I made a variable since I've had issues with the "bind(this)" that I'm still not fully sure what it means, I've read about it online but it didn't really clear things up for me but I've noticed that setting a variable for "this" can prevent some issues at least. So we have: var self6 = this Then I have a simple button which makes two movieclips go to a certain frame: self6.Panels.Cat6.Cat6part1.Patreonbutton5.addEventListener("click", Patreonbutton5Click.bind(this)); function Patreonbutton5Click() { self6.Hairfront1.gotoAndStop(9); self6.Hairfront2.gotoAndStop(9); } Then I also have two buttons changing the colors of these two movieclips. I used to write "Hairfront1.transform.colorTransform = new ColorTransform (1, 1, 1, 1, -35, -217, -217, 0);", so now I'm looking for the equivalent in javascript and from what I've researched, this seems to be the best option: self6.Panels.Cat6.Cat6part1.Patreonbutton8.addEventListener("click", Patreonbutton8Click.bind(this)); function Patreonbutton8Click() { self6.Hairfront1.filters = [ new createjs.ColorFilter(1, 1, 1, 1, -35, -217, -217, 0) ]; self6.Hairfront1.cache(0, 0, 1200, 900); } self6.Panels.Cat6.Cat6part1.Patreonbutton9.addEventListener("click", Patreonbutton9Click.bind(this)); function Patreonbutton9Click() { self6.Hairfront2.filters = [ new createjs.ColorFilter(1, 1, 1, 1, -35, -217, -217, 0) ]; self6.Hairfront2.cache(0, 0, 1200, 900); } The last buttons with their functions are doing what they should. But, if I try to press Patreonbutton5 after pressing Patreonbutton8/9, it won't do anything. If I press Patreonbutton8/9 right after Patreonbutton5, it will perform the Patreonbutton5Click function instead of their own functions. If I press Patreonbutton5 before Patreonbutton8/9 it works just as it should. Clearly something is going on that I don't understand. Anyone here who has a clue of what I'm missing? A bonus question as well. Since these color buttons change the color of all of the movieclips inside Hairfront1 and Hairfront 2 (there's a different movieclip on each frame) and these all have different sizes, I wasn't sure how to do with the cache. Just to check if these buttons would work at all, I decided to cache the size of the entire game. Visually it's not an issue since the transparent pixels stay transparent, but is it bad to do for any other reasons and should I cache the smallest area possible? Thank you in advance!
... View more
‎Aug 02, 2017
07:24 AM
That worked out. Thank you kindly!
... View more
‎Aug 02, 2017
05:30 AM
I have two functions who are supposed to make a couple of buttons on the stage invisible, capture a part of the canvas and then make some of those buttons visible again so the user can keep playing the game and save multiple pictures. However I cannot get the buttons to automatically become visible again. This is what I have: this.Savepicbutton.addEventListener("click", savePartImage2.bind(this)); function savePartImage2() { this.Savepicbutton.visible = false; this.Savepicbutton2.visible = false; this.Savepicbutton3.visible = false; this.Linkbutton4.visible = false; this.Linkbutton3.visible = false; this.Linkbutton2.visible = false; setTimeout(savePartImage, 300); } function savePartImage() { var c=document.getElementById("canvas"); var backCanvas = document.createElement('canvas'); backCanvas.width = 700; backCanvas.height = 900; var backCtx = backCanvas.getContext('2d'); backCtx.drawImage(c, -500, 0, 1200, 900); var d=backCanvas.toDataURL("image/jpeg"); var w=window.open('about:blank','image from canvas'); w.document.write("<img src='"+d+"' alt='from canvas'/>"); this.Savepicbutton.visible = true; this.Savepicbutton2.visible = true; this.Savepicbutton3.visible = true; this.Linkbutton2.visible = true; } Without the setTimeout, the canvas is drawn before the buttons are turned invisible. I tried setting the selected buttons to true in the savePartImage2 function after the setTimeout but that caused the buttons to become visible before the canvas was drawn so they were visible in the captured image. Any clue of what I'm doing wrong?
... View more
AdChoices